Extra Form
PHP PHP 7.2
CMS Rhymix 2.0

안녕하세요.

 

여러 테스트를 해봤는데
위젯 수정페이지만 가면 레이아웃의 상세설정 헤더 스크립트에서 인크루드한 js 파일이 먹통이 되어버리는 증상이 있었습니다.

어차피 관리자페이지니 불편을 감소하고 F12눌러서 js 때문에 화면을 가리는 영역 div를 지워서 사용하곤 했습니다.

오래 되었습니다. 체감상 한 6 7 년된것 같네요. ㅎㅎ

 

추가로 과거엔 정말 많았지만 특정 모듈 페이지에가면 해당 증상이 발현되는 모듈이 많았습니다.

지금은 대부분 고쳐졌기에 그냥 쓰고 있었지만 또 오늘 그런 모듈이 있길래 한번 고쳐보자 마음먹었고

상세설정 헤더 스크립트에서 인크루드한 js를 html 하단으로 넣어버리니 증상이 사라졌습니다.

 

하지만 위젯 수정페이지의 해당 증상은 CSS가 노출되고 js도 불러와지지 않는 증상이 있네요

정정 합니다. 위치를 바꾼후  js는불러와졌는데 JS 내에서 설정한 CSS가 상단에 텍스트로 노출되어 버리네요.

이거 js 소스가 개발된게 한 15년 이상된 스크립트인데 혹시 그게 문제가 될까요?

 

https://www.tek-tips.com/viewthread.cfm?qid=1025119

코드는 약간 이런식으로 영역 가로 세로 높이값을 JS에서 수동으로 손으로 넣어주는 방식입니다.

아래 코드와 위코드가 결합되어

문제의코드.JPG

이부분이 정상적인 CSS가 되어서 문서 최상단에 노출되어버리네요.

 

제이쿼리로 비슷한 느낌을 낼 수 있겠지만

제가 어린시절 부터사용하던 소스이고 참 애착이 가는 메뉴라서 계속 쓰고있는 메뉴 타입입니다.

 

몇일 전 기진곰님이 말씀주신것처럼 사이트 디자인 설정의  HTML/CSS 설정과 헤더 스크립트에 코드를 직접 넣어발생한것인지 원인이 궁금합니다.

 

안써야하는데 이게 습관이 참 무섭네요.

 

그리고 위젯 페이지 수정 페이지의 노가다나 에러가 너무 심한데(소스없이 DIV 생성하고 정렬하고 하는게 ... 쉽지않습니다.)

일반 HTML로 쓸수있는방법은 없을까요?

 

만약 html을 직접 사용하고자 메인 페이지 레이아웃을 추가로 만들면 사용은 가능하겠지만

 

통 레이아웃을 고치면 메인 레이아웃까지 두번 고쳐야하는 상황이 벌어질것 같은데

이 또한 레이아웃은 인크루드 시키고 컨텐츠 부분만 들어있는 레이아웃으로 제작하여야 할지 여려 고민이 앞섭니다.

 

감사합니다.

  • profile

    어떤 js인지 보여주셔야 뭐가 문제인지 알 수 있겠지요? 콘솔에 에러 뜨나요?

     

    html을 직접 다루실 수 있다면 위젯페이지 대신 외부페이지로 작성하고, 위젯이 필요한 곳에만 위젯코드를 생성해서 넣으셔도 됩니다. 각각의 위젯에 상하좌우 여백 넣는 것보다 훨씬 다양한 스타일과 html5 기능들을 활용할 수 있고, 심지어 반응형으로 구현할 수도 있지요. 외부페이지 기능을 활용하면 컨텐츠 영역에 원하는 html을 뭐든지 넣을 수 있는데 굳이 멀쩡한 레이아웃을 중복으로 쓸 필요는 없잖아요?^^

  • profile profile

    JS에서 선언한 스타일 시트가 텍스트로 그대로 웹페이지 상단에 노출되네요.
    노출된 CSS를 그냥 CSS 에넣어보면 작동할것 같은 느낌이들어 해보려고합니다.

     

    JS코드는 별다른것 없이 저기 위에 적은링크와 

    캡쳐한부분의 조합의 js가 CSS를 만들어 내는 구조입니다.

    아 외부페이지으로 html 불러오는 방법이 있네요 한번 적용해보겠습니다. 감사합나다.

  • profile profile

    저렇게 여러 번 d.write하지 말고, <style>부터 </style>까지 한꺼번에 입력해 보세요. 익스 6,7 관련 코드는 그냥 빼시고요. 예전에 비해 브라우저들이 더 엄격해져서 생긴 문제일 수도 있습니다. 여러 번 나눠서 입력하다 보면 잠깐 동안 닫히지 않은 <style> 태그가 존재하게 되니까요.

  • profile profile

    캡처.JPG

     

    위젯 수정 페이지에서는 

    d.write('<style type="text/css">')

     

    d.write('</style>')

     

    이구문이 저렇게 바뀐것 같습니다. 

     

     

    일반페이지에서는

    일반페이지.JPG

     

    로 나오네요 혹시 짐작가는 원인이 있을까요?

  • profile profile

    위에 말씀드린 것처럼 d.write 한 번만 써서 모두 입력해 보세요. 처음 d.write를 호출한 직후에는 <style> 태그를 열기만 하고 닫지 않았으니까 브라우저에서 자동으로 닫는 태그를 추가해 버리는 겁니다. 그러면 그 후에 d.write하는 내용은 </style> 태그 뒤에 들어가지요.

    이렇게 웹표준이 아닌 브라우저의 임의 처리에 의존하는 동작은 코드를 넣는 위치나 해석하는 타이밍에 따라 되다가 말다가 할 수도 있어요. 급할 때는 그냥 태그 닫고 넘어가고, 조금 여유가 있을 때는 기다려 주기도 하지요.

  • profile profile

    답변감사합니다.

    근데 
    소스에 

    d.write('<style type="text/css">') 열고
       내용 본문 스크린샷에 일부만 담는다고 닫기는 잘려있었지만
    d.write('</style>')닫는 스크립트 또한 포함되어 있습니다.

     

    이는 위젯수정 페이지가아닌 다른 일반 페이지의 스크린샷입니다.

    위젯수정페이지를 제외한 대부분 페이지에서는 장상적으로 CSS를 열고 닫는것이 잘 입력이 됩니다.

    정상페이지.JPG

    물론 div 하나마다 하나씩 열고닫는 ㅎㅎ 무한반복이 보이긴하네요.
    말씀주신것처럼 고쳐야하겠지만 JS 지식이 전무하니 또 검색을 통해 작업하려면 시간이 걸려 우선적으로 해결하고 싶은 마음입니다.


    제가 궁금한것은 이 소스가 일반 라이믹스 대부분 페이지에서는 모두 동작하지만
    위젯 수정 페이지에서만 작동하지 않는 원인이 궁금합니다.

     

    위젯 수정페이지에서의 증상

    증상.JPG

     

    캡처.JPG

  • profile profile

    위젯수정 페이지나 오래된 모듈처럼 웹표준이 아닌 구닥다리 소스가 많이 포함된 페이지일수록 브라우저의 해석 모드가 달라질 가능성이 큽니다. 웹표준이 아닌 코드는 사실상 랜덤으로 오락가락한다고 봐도 됩니다.

     

    위에서 제안해 드린 방법이 가장 빠르고 확실한 해결책입니다. 했던 말씀 자꾸 반복하지 마시고, 일단 답변대로 해 보고 나서 다시 말씀하세요.

    이렇게 되어 있는 것을
    d.write('<style type="text/css">');
    d.write('AAA');
    d.write('BBB');
    d.write('</style>');

    이렇게 바꾸기만 하면 돼요.
    d.write('<style type="text/css">' +
    'AAA' +
    'BBB' +
    '</style>');

  • profile profile

    와.. 바로 해결 되었네요!
    여러 이상한 코드들이 뭉쳐서 이상한 결과를 만들어 냈었 나보네요.

    보내주신 코드를 보니
    이미 코드중 일부는 + 들이 쓰여있었네요. 코드 까막눈이라서 스스로 할 수 있었던걸 또 번거롭게 만들어 드렸네요.

     

    얼추 10년 넘게 불편사항이였던

    애증의 코드를 드디어 개선했네요. 기분이 많이 좋습니다.
    항상 감사드립니다.

  • profile profile
    js가 기본적으로 명령들을 순차적으로 실행하는 것이 아니라 클라이언트의 웹브라우저 로드 상황에 따라 아랫줄의 명령 코드를 한꺼번에 실행하기도 하거든요.
    d.write('</style>'); 이라면 코드가 짧으니 앞줄의 긴 명령보다 더 빨리 처리될 수도 있었을 것 같아요.
  • profile profile
    그래서 먼저 스타일이 닫혀버렸나보네요
    근데 반복되지 않고 한번만 닫혀버린것은 또 이상하고
    뭐하나 쉬운것이 없는 것이 코딩이네요.
  • profile profile
    그때그때 다르더라구요.
    js로 뭔가 처리를 할 때 가끔 불편함이 생기기도 합니다.
    그래서 비동기 실행이라는 개념도 나온 것 같더라구요.
  • profile profile

    저렇게 단순하게 나열해 놓은 코드의 순서가 바뀌지는 않아요. 바뀌면 큰일이죠...

     

    단, 내 코드가 실행되는 도중에 언제라도 다른 코드가 끼어들 수 있습니다. 만약 다른 코드가 주변의 DOM을 건드린다면 그 과정에서 브라우저가 "어? 여기 반쪽짜리 태그가 있네?" 하고는 자동으로 태그를 닫아버릴 수도 있어요. 위젯 수정 화면에는 사방에 이벤트가 걸려 있으니...

  • profile

    정말 신기하네요

    텍스트로 상단에 노출된 CSS를 그냥 그대로 가져와서
    스타일 시트에 박아줘버리니 역시나 작동은 되네요.

     

    하지만 위젯 수정페이지 떄문에 css 를 또 적어주면 중복 노출이 되는것이고 고민이 많네요. 

  • profile

    추측 되는 원인으로는
    JS 내의 
    d.write('<style type="text/css">')
    d.write('</style>')

    이거 두 개가 제대로 변환 되지 않아 텍스트가 그대로 노출 되는것이 아닐까 생각이 드네요.