这似乎是仅与 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 有何想法?
最终,我希望能够将 JavaScript 对象传递给这个 trackingCode.html
文件,以便在 jQuery 就绪调用中使用,但我想确保在我走这条路之前,这在所有浏览器中都是可能的。
您正在将整个 HTML 页面加载到您的 div 中,包括 html、head 和 body 标记。如果您执行加载并且在您加载的 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's solution 的另一个版本,这对我来说很好:
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 executed.'); });
如果您将 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() 显示等待指示器然后在其后链接 .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 在这种情况下,脚本永远不会运行,甚至一次也不会。
如果您想同时加载 HTML 和脚本,这里有一种更自动化的方法,可以同时使用 $(selector).load()
和 jQuery.getScript()
。此特定示例从 content.html
加载 ID 为“toLoad”的元素的 HTML 内容,将 HTML 插入 ID 为“content”的元素中,然后加载并运行 ID 为“toLoad”的元素内的所有脚本。
$("#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());
}
});
}
});
此代码查找正在加载的内容中的所有脚本元素,并循环遍历这些元素中的每一个。如果元素具有 src
属性,这意味着它是来自外部文件的脚本,我们使用 jQuery.getScript
方法来获取和运行脚本。如果元素没有 src
属性,这意味着它是一个内联脚本,我们只需使用 eval
来运行代码。如果它没有找到脚本元素,它只会将 HTML 插入到目标元素中,并且不会尝试加载任何脚本。
我已经在 Chrome 中测试了这个方法,它可以工作。请记住在使用 eval
时要小心,因为它可能会运行潜在的不安全脚本并且通常被认为是有害的。您可能希望在使用此方法时避免使用内联脚本,以避免必须使用 eval
。
好吧,我遇到了似乎只发生在 Firefox 上的相同问题,除了 .load() 之外,我无法使用其他 JQuery 命令,因为我正在修改现有 PHP 文件的前端......
无论如何,在使用 .load() 命令之后,我将我的 JQuery 脚本嵌入到正在加载的外部 HTML 中,并且它似乎可以工作。我不明白为什么我在主文档顶部加载的 JS 不适用于新内容......
我可以通过将 $(document).ready()
更改为 window.onLoad()
来解决此问题。
附上@efreed 的答案...
我使用 .load('mypage.html #theSelectorIwanted')
通过选择器从页面调用内容,但这意味着它不会执行内部的内联脚本。
相反,我能够更改我的标记,以便'#theSelectorIwanted'
成为它自己的文件并且我使用
load('theSelectorIwanted.html`, function() {});
它运行内联脚本就好了。
不是每个人都有这个选择,但这是一个快速的解决方法,可以到达我想要的地方!
不定期副业成功案例分享