jQuery .load() 호출이 로드된 HTML 파일에서 JavaScript를 실행하지 않음
이것은 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에서 메시지를 볼 수 없습니다(마지막으로 고려해야 할 브라우저 - 프로젝트 요건 - 불꽃 전쟁을 하지 말아주세요).
에 trackingCode.html 파일? 파일?
으로 이 를 이 JavaScript 오브젝트에 trackingCode.htmljQuery ready call에서 사용하는 파일입니다만, 그 전에 모든 브라우저에서 가능한 파일인지 확인하고 싶습니다.
html, 머리 및 본문 태그를 포함한 전체 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에서는 이 기능을 사용할 수 있습니다.
업데이트: 테스트 환경의 코드와 일치하도록 DOSCTYPE 및 html 네임스페이스를 추가했습니다.Firefox 3.6.13에서 테스트하여 코드 예제를 실행.
$("#images").load(location.href+" #images",function(){
$.getScript("js/productHelper.js");
});
방금 전 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); } );
}
...
});
좀 오래된 글이라는 건 알지만, 이 페이지를 방문하셔서 비슷한 해결책을 찾으시는 분들은...
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.'); });
HTML 필드를 동적으로 작성된 요소에 로드하는 경우에는 이 작업이 작동하지 않는 것 같습니다.
$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');
firebug DOM을 보면 스크립트노드는 전혀 없고 HTML과 CSS 노드만 있습니다.
이거 본 사람 있어?
거의 다 왔어.스크립트만 로드하도록 jquery에 지시합니다.
$("#myBtn").click(function() {
$("#myDiv").load("trackingCode.html script");
});
trackingCode.html에서 다음과 같이 테스트합니다.
<script type="text/javascript">
$(function() {
show_alert();
function show_alert() {
alert("Inside the jQuery ready");
}
});
</script>
html 로딩 기능을 위한 jquery 플러그인을 작성했습니다.http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html
스크립트가 한 번 로드되지만 반복 호출에서는 스크립트가 실행되지 않습니다.
이 문제는 .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 뒤에 셀렉터가 없음)은 단순히 dataType:"html"을 사용하여 $.ajax()를 호출하고 반환 내용을 가져와서 .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 이 경우 스크립트는 한 번도 실행되지 않습니다.
를 모두 사용하여 보다 $(selector).load() ★★★★★★★★★★★★★★★★★」jQuery.getScript()ID가 "toLoad를 ""로 HTML에서 content.html는 HTML을가 "content한 후 스크립트를 "HTML ID "content"는 "" ID입니다.
$("#content").load("content.html #toLoad", function(data) {
var scripts = $(data).find("script");
if (scripts.length) {
$(scripts).each(function() {
if ($(this).attr("src")) {
$.getScript($(this).attr("src"));
}
else {
eval($(this).html());
}
});
}
});
이 코드는 로드되는 콘텐츠 내의 모든 스크립트 요소를 찾아 이들 요소를 루프합니다.에 음음음음음음이 있는 srcattribute는 파일로부터의 attribute(「」)를 합니다.jQuery.getScript스크립트를 가져오고 실행하는 방법입니다.이 srcattribute attribute attribute를 사용합니다.eval코드를 실행합니다.스크립트 요소가 발견되지 않으면 HTML을 타겟 요소에만 삽입하고 스크립트를 로드하지 않습니다.
이 방법을 크롬으로 테스트해 봤는데 효과가 있어요.사용 시 주의할 것eval안전하지 않을 수 있는 스크립트를 실행할 수 있으며 일반적으로 유해하다고 간주되기 때문입니다.이 방법을 사용할 때 인라인 스크립트를 사용하지 않는 것이 좋습니다.eval.
파이어폭스에서만 발생하는 것과 같은 문제가 있었습니다.기존 PHP 파일의 프런트 엔드를 수정하고 있었기 때문에 .load() 이외의 다른 JQuery 명령어를 사용할 수 없었습니다.
어쨌든 .load() 명령어를 사용한 후 로딩 중인 외부 HTML에 JQuery 스크립트를 삽입하여 동작하는 것 같습니다.메인 문서 상단에 로드한 JS가 왜 새로운 콘텐츠에 작동하지 않았는지 이해할 수 없습니다만...
저는 이 문제를 수정함으로써 해결할 수 있었습니다.$(document).ready()로.window.onLoad().
@freed answer에 접속하는 중...
사용하고 있었습니다..load('mypage.html #theSelectorIwanted')페이지 내의 콘텐츠를 셀렉터로 호출합니다.단, 내부 인라인스크립트는 실행되지 않습니다.
대신, 저는 마크업을 바꿀 수 있었습니다.'#theSelectorIwanted'자신의 파일이 되어 버려서
load('theSelectorIwanted.html`, function() {});
인라인 스크립트는 정상적으로 실행되었습니다.
모든 사람이 그러한 옵션을 가지고 있는 것은 아니지만, 이것은 내가 원하는 곳에 도달하기 위한 간단한 해결 방법이었다.
언급URL : https://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file
'programing' 카테고리의 다른 글
| 목록에서 연속된 번호 그룹 식별 (0) | 2023.04.10 |
|---|---|
| .ps1 파일을 더블 클릭하여 PowerShell 스크립트를 실행하는 방법이 있습니까? (0) | 2023.04.10 |
| React Native는 iOS 및 Android에서 JavaScript를 네이티브로 실행할 수 있도록 하기 위해 무엇을 사용합니까? (0) | 2023.04.05 |
| 왜 모든 렌더에서 useEffect의 정리 기능이 호출됩니까? (0) | 2023.04.05 |
| 셸 스크립트를 사용하여 mongo 명령을 실행하는 방법은 무엇입니까? (0) | 2023.04.05 |