jQuery .load () 호출이로드 된 HTML 파일에서 JavaScript를 실행하지 않습니다.

Question 1

이것은 Safari에만 관련된 문제인 것 같습니다. 나는 Mac에서 4, Windows에서 3을 시도했지만 여전히 운이 없습니다.

외부 HTML 파일을로드하고 포함 된 JavaScript를 실행하려고합니다.

내가 사용하려는 코드는 다음과 같습니다.

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html");
});

trackingCode.html 다음과 같이 보입니다 (이제 간단하지만 한 번 확장됩니다 /이게 작동하면).

<html>
<head>
    <title>Tracking HTML File</title>
    <script language="javascript" type="text/javascript">
        alert("outside the jQuery ready");
        $(function() {
            alert("inside the jQuery ready");
        });
    </script>
</head>

<body>
</body>
</html>

IE (6 및 7)와 Firefox (2 및 3)에서 경고 메시지가 모두 표시됩니다. 그러나 Safari에서 메시지를 볼 수 없습니다 (관심이 필요한 마지막 브라우저-프로젝트 요구 사항-화염 전쟁은 삼가십시오).

Safari가 trackingCode.html파일 에서 JavaScript를 무시하는 이유에 대한 생각이 있습니까?

결국 trackingCode.htmljQuery 준비 호출 내에서 사용 하기 위해이 파일에 JavaScript 개체를 전달할 수 있기를 원 하지만 그 길을 가기 전에 모든 브라우저에서 이것이 가능한지 확인하고 싶습니다.

Question 2

html, head 및 body 태그를 포함하여 전체 HTML 페이지를 div에로드합니다. 로드를 수행하고로드하는 HTML에 여는 스크립트, 닫는 스크립트 및 JavaScript 코드 만 있으면 어떻게됩니까?

다음은 드라이버 페이지입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Load of Script</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.2");
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#myButton").click(function() {
                    $("#myDiv").load("trackingCode.html");
                });
             });
         </script>
    </head>
    <body>
        <button id="myButton">Click Me</button>
        <div id="myDiv"></div>
    </body>
</html>

trackingCode.html의 내용은 다음과 같습니다.

<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

이것은 Safari 4에서 저에게 효과적입니다.

업데이트 : 내 테스트 환경의 코드와 일치하도록 DOCTYPE 및 html 네임 스페이스를 추가했습니다. Firefox 3.6.13에서 테스트되었으며 예제 코드가 작동합니다.

Question 3

$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

Question 4

바로 전에 John Pick 솔루션 의 다른 버전 이 나에게 잘 작동합니다.

jQuery.ajax({
   ....
   success: function(data, textStatus, jqXHR) {
       jQuery(selecteur).html(jqXHR.responseText);
       var reponse = jQuery(jqXHR.responseText);
       var reponseScript = reponse.filter("script");
       jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
   }
   ...
});

Question 5

나는 이것이 다소 오래된 게시물이라는 것을 알고 있지만 비슷한 솔루션을 찾고있는이 페이지에 오는 모든 사람에게는 ...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url, [ success(data, textStatus) ] )
url -요청이 전송되는 URL이 포함 된 문자열입니다.

success(data, textStatus) -요청이 성공하면 실행되는 콜백 함수.
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

Question 6

HTML 필드를 동적으로 생성 된 요소에로드하는 경우 작동하지 않는 것 같습니다.

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

방화범 DOM을 보면 스크립트 노드가 전혀없고 HTML과 CSS 노드 만 있습니다.

누구든지 이것을 본 적이 있습니까?

Question 7

거의 얻었습니다. 스크립트 만로드하고 싶다고 jquery에 알립니다.

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});

Question 8

html 로딩 기능을 위해 다음 jquery 플러그인을 작성했습니다. http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

Question 9

trackingCode.html에서 다음과 같이 테스트하십시오.

<script type="text/javascript">

    $(function() {

       show_alert();

       function show_alert() {
           alert("Inside the jQuery ready");
       }

    });
 </script>

Question 10

스크립트가 한 번로드되지만 반복 호출이 스크립트를 실행하지 않는 곳을 만났습니다.

.html ()을 사용하여 대기 표시기를 표시 한 다음 그 뒤에 .load ()를 연결하는 것이 문제로 판명되었습니다.

// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");

별도의 호출을 할 때마다 인라인 스크립트가 예상대로로드되었습니다.

// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");

추가 연구를 위해 .load ()에는 두 가지 버전이 있습니다.

간단한 .load () 호출 (URL 뒤에 선택기 없음)은 단순히 $ .ajax ()를 dataType : "html"로 호출하고 반환 내용을 가져와 .html ()을 호출하여 해당 내용을 DOM에 넣는 것입니다. . 그리고 dataType : "html"에 대한 문서에는 "포함 된 스크립트 태그는 DOM에 삽입 될 때 평가됩니다."라고 명시되어 있습니다. http://api.jquery.com/jquery.ajax/ 따라서 .load ()는 공식적으로 인라인 스크립트를 실행합니다.

복잡한 .load () 호출에는 load ( "page.html #content")와 같은 선택기가 있습니다. 그런 식으로 사용하면 jQuery는 다음과 같은 기사에서 논의 된대로 스크립트 태그를 의도적으로 필터링합니다. https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 이 경우 스크립트는 한 번도 실행하지 마십시오.

Question 11

글쎄요 저는 Firefox에서만 발생하는 똑같은 문제가 있었고 기존 PHP 파일에서 프런트 엔드를 수정했기 때문에 .load ()를 제외한 다른 JQuery 명령을 사용할 수 없었습니다.

어쨌든 .load () 명령을 사용한 후로드되는 외부 HTML에 JQuery 스크립트를 삽입했는데 작동하는 것처럼 보였습니다. 주 문서 맨 위에로드 한 JS가 새 콘텐츠에서 작동하지 않는 이유를 이해하지 못합니다.

Question 12

변경하여이 문제를 해결할 수있었습니다. $(document).ready() 에 window.onLoad().

Question 13

@efreed 답변에 태그 ...

나는 사용하고 있었다 .load('mypage.html #theSelectorIwanted')선택기로 페이지에서 콘텐츠를 호출 데 했지만 내부에서 인라인 스크립트를 실행하지 않음을 의미합니다.

대신 마크 업을 변경하여 '#theSelectorIwanted'자체 파일이되었고

load('theSelectorIwanted.html`, function() {});

인라인 스크립트를 잘 실행했습니다.

모든 사람이 그 옵션을 가지고있는 것은 아니지만 이것은 내가 원하는 곳으로 가기위한 빠른 해결 방법이었습니다!