jQuery .load()调用不会在加载的HTML文件中执行JavaScript

时间:2009-05-20 20:07:51

标签: jquery ajax safari

这似乎只是与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&amp; 7)和Firefox(2&amp; 3)中看到了两条警报消息。但是,我无法在Safari中看到这些消息(我需要关注的最后一个浏览器 - 项目要求 - 请不要进行火焰战争。)

有关Safari为什么忽略trackingCode.html文件中的JavaScript的想法?

最终我希望能够将JavaScript对象传递给此trackingCode.html文件,以便在jQuery ready调用中使用,但我想确保在我失败之前在所有浏览器中都可以使用那条路。

13 个答案:

答案 0 :(得分:55)

您正在将整个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进行测试,示例代码可以正常工作。

答案 1 :(得分:38)

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

答案 2 :(得分:23)

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

答案 3 :(得分:13)

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

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

jQuery.getScript( url, [ success(data, textStatus) ] )
     
      
  • url - 包含请求发送到的网址的字符串。

  •   
  • success(data, textStatus) - 请求成功时执行的回调函数。

  •   
     

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

答案 4 :(得分:9)

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

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

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

有人遇到过这个吗?

答案 5 :(得分:2)

你几乎得到了它。告诉jquery你只想加载脚本:

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

答案 6 :(得分:2)

在trackingCode.html中测试:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>

答案 7 :(得分:2)

我尝试为html加载函数制作一个jquery插件。请参阅以下链接。

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

请建议我进一步改进。

谢谢, 莫汉

答案 8 :(得分:0)

关注@efreed答案...

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

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

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

,它运行内联脚本就好了。

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

答案 9 :(得分:0)

我遇到了脚本只能加载一次但重复调用无法运行脚本的情况。

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

答案 10 :(得分:0)

如果要同时加载HTML和脚本,这是一种同时使用[A-Za-z0-9_@]$(selector).load()的自动化方式。此特定示例从jQuery.getScript()加载ID为“ toLoad”的元素的HTML内容,将HTML插入ID为“ content”的元素,然后加载并运行ID为“ toLoad”的元素中的所有脚本

content.html

此代码在要加载的内容中找到所有脚本元素,并循环遍历每个元素。如果元素具有$("#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来运行代码。如果找不到脚本元素,它将仅将HTML插入目标元素,而不尝试加载任何脚本。

我已经在Chrome中测试了此方法,并且可以正常工作。请记住在使用eval时要小心,因为它可能运行潜在的不安全脚本,通常被认为是有害的。为了避免必须使用eval,您可能希望避免使用内联脚本。

答案 11 :(得分:0)

嗯我有同样的问题,似乎只发生在Firefox上,除了.load()之外我无法使用另一个JQuery命令,因为我在exisitng PHP文件上修改了前端...

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

答案 12 :(得分:0)

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