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에서 메시지를 볼 수 없습니다 (관심이 필요한 마지막 브라우저-프로젝트 요구 사항-화염 전쟁은 삼가십시오).
Safari가 trackingCode.html파일 의 JavaScript를 무시하는 이유에 대한 생각이 있습니까?
결국 trackingCode.htmljQuery 준비 호출 내에서 사용하기 위해 JavaScript 개체를이 파일 에 전달할 수 있기를 원 하지만 그 길을 가기 전에 모든 브라우저에서 이것이 가능한지 확인하고 싶습니다.
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에서 테스트되었으며 예제 코드가 작동합니다.
$("#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); } );
}
...
});
I realize this is somewhat of an older post, but for anyone that comes to this page looking for a similar solution...
http://api.jquery.com/jQuery.getScript/
jQuery.getScript( url, [ success(data, textStatus) ] )
url- A string containing the URL to which the request is sent.
success(data, textStatus)- A callback function that is executed if the request succeeds.$.getScript('ajax/test.js', function() { alert('Load was performed.'); });
This doesn't seem to work if you're loading the HTML field into a dynamically created element.
$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');
I look at firebug DOM and there is no script node at all, only the HTML and my CSS node.
Anyone have come across this?
You've almost got it. Tell jquery you want to load only the script:
$("#myBtn").click(function() {
$("#myDiv").load("trackingCode.html script");
});
Test with this in trackingCode.html:
<script type="text/javascript">
$(function() {
show_alert();
function show_alert() {
alert("Inside the jQuery ready");
}
});
</script>
I have try to make one jquery plugin for html loading function. Please refer the following link.
http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html
Please suggest me to improve it more.
Thanks, Mohan
Well I had the same problem that only seemed to happen for Firefox, and I couldn't use another JQuery command except for .load() since I was modifying the front-end on exisitng PHP files...
Anyways, after using the .load() command, I embedded my JQuery script within the external HTML that was getting loaded in, and it seemed to work. I don't understand why the JS that I loaded at the top of the main document didn't work for the new content however...
I was able to fix this issue by changing $(document).ready() to window.onLoad().
I ran into this where the scripts would load once, but repeat calls would not run the script.
It turned out to be an issue with using .html() to display a wait indicator and then chaining .load() after it.
// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");
When I made them separate calls, my inline scripts loaded every time as expected.
// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");
For further research, note that there are two versions of .load()
A simple .load() call (without a selector after the url) is simply a shorthand for calling $.ajax() with dataType:"html" and taking the return contents and calling .html() to put those contents in the DOM. And the documentation for dataType:"html" clearly states "included script tags are evaluated when inserted in the DOM." http://api.jquery.com/jquery.ajax/ So .load() officially runs inline scripts.
A complex .load() call has a selector such as load("page.html #content"). When used that way, jQuery purposefully filters out script tags as discussed in articles like this one: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 In this case the scripts never run, not even once.
'Nice programing' 카테고리의 다른 글
| "NUL"문자 제거 (0) | 2020.10.07 |
|---|---|
| 비어 있지 않은 PSR-4 접두사는 네임 스페이스 구분자로 끝나야합니다. (0) | 2020.10.07 |
| CLI 애플리케이션에서 Ctrl + C를 어떻게 "차단"할 수 있습니까? (0) | 2020.10.07 |
| PhantomJS; (0) | 2020.10.07 |
| “개발자 디스크 이미지를 찾을 수 없습니다.” (0) | 2020.10.07 |