ChatGPT解决这个技术问题 Extra ChatGPT

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 有何想法?

最终,我希望能够将 JavaScript 对象传递给这个 trackingCode.html 文件,以便在 jQuery 就绪调用中使用,但我想确保在我走这条路之前,这在所有浏览器中都是可能的。


L
Laurent

您正在将整个 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 测试,示例代码有效。


明白了,谢谢托尼!删除 、 和 标签似乎可以解决问题。
我在徘徊我是否应该做一个单独的ajax调用getJson(),因为我听说过这个..但如果它像那样工作就可以了!否则我会两次调用相同的查询
您的代码实际上并没有在 FF 中工作(IE8 - 工作正常)。有没有办法让它在所有浏览器中都能正常工作?谢谢
@Maxim Galushka 我的个人工作站中仍然有这些文件。未经修改,它们产生了正确的行为。我在 Windows 7 上使用 Firefox 3.6.13。
x
xtds
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

这对我有用。这是您可以尝试的示例: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase().indexOf(frmAcademicCalendar.toLowerCase()) >= 0) { $("#IncludeCMSContent") .load("example.com #externalContent",function() { $.getScript("example.js"); }); }
C
Community

之前的 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); } );
   }
   ...
});

这是最好的解决方案!,我爱你@Yannick,你让我开心
s
sth

我意识到这是一篇较旧的帖子,但对于任何来到此页面寻找类似解决方案的人......

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.'); });


2
2 revs, 2 users 93%

如果您将 HTML 字段加载到动态创建的元素中,这似乎不起作用。

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

我查看了 firebug DOM,根本没有脚本节点,只有 HTML 和我的 CSS 节点。

有人遇到过这个吗?


我必须加载 html,然后在回调中,使用 $.getScript 来获取 javascript。
老兄!大约 8 年前,你解决了我的问题。感谢:D
J
John Pick

你几乎明白了。告诉 jquery 你只想加载脚本:

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

但这似乎只加载和脚本。你如何让它加载 html 内容并运行它可能包含的任何 javascript?
A
Aamir

在 trackingCode.html 中对此进行测试:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>

N
Nfff3

我为 html 加载功能编写了以下 jquery 插件:http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html


e
efreed

我遇到了脚本会加载一次的地方,但重复调用不会运行脚本。

事实证明,使用 .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 在这种情况下,脚本永远不会运行,甚至一次也不会。


C
Cannicide

如果您想同时加载 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


V
Victor G. Reano

好吧,我遇到了似乎只发生在 Firefox 上的相同问题,除了 .load() 之外,我无法使用其他 JQuery 命令,因为我正在修改现有 PHP 文件的前端......

无论如何,在使用 .load() 命令之后,我将我的 JQuery 脚本嵌入到正在加载的外部 HTML 中,并且它似乎可以工作。我不明白为什么我在主文档顶部加载的 JS 不适用于新内容......


很简单,因为脚本执行时新内容不存在。
C
Casey Dwayne

我可以通过将 $(document).ready() 更改为 window.onLoad() 来解决此问题。


R
RCNeil

附上@efreed 的答案...

我使用 .load('mypage.html #theSelectorIwanted') 通过选择器从页面调用内容,但这意味着它不会执行内部的内联脚本。

相反,我能够更改我的标记,以便'#theSelectorIwanted'成为它自己的文件并且我使用

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

它运行内联脚本就好了。

不是每个人都有这个选择,但这是一个快速的解决方法,可以到达我想要的地方!