JQuery .get 不执行Javascript

Posted 2023-03-05

【中文标题】JQuery .get 不执行Javascript

【英文标题】：JQuery .get doesnt execute Javascript

【发布时间】：2012-01-05 19:36:58

【问题描述】：

我正在使用 JQuery .get 方法从网页（第 1 页）中检索一些内容并将其显示在主页的 div 中。问题是检索到的内容包含一些 javascript 调用。内容正在显示，但 Javascript 方法未得到执行。 .js 文件在所有页面中都被引用，因此 main 中 js 的可用性不是问题。

这是主页中的代码。第 1 页的 URL 提供给 .get 函数：

$.get(url, function(response)           
    var newContent = $(response).find("#right");      //Find the content section of the response
    var contentWrapper = $("#wrap");         //Find the content-wrapper where we are supposed to change the content.
    var oldContent = contentWrapper.find("#right");   //Find the old content which we should replace.

    oldContent.replaceWith(newContent);
);

这是第1页#right（div）中的代码

Some html tags...    
<p><script type="text/javascript">abc7();</script></p>
<p><script>s(30)</script></p>
Some html tags...

函数 abc7 和 s 在所有页面部分中引用的 .js（普通 javascript 文件）中可用

s(30) 应该显示一个大小为 30 的文本字段。

【问题讨论】：

我发现这个问题很相似：***.com/questions/4619668/… 但是，那里提出的解决方案不符合我的目的。首先，我不确定 Page1 的响应中会调用什么函数。所以，我不能从我的 ajax 调用这些脚本。有出路吗？

【参考方案1】：

您可以使用.load() 函数代替.get()。它会自动执行响应中包含的脚本。

这里是文档：.load()

【讨论】：

load() 会将响应的内容附加到匹配的元素中，而不是替换它们，因此并不能完全解决问题。

【参考方案2】：

除非您在其上运行 eval()，否则内联 JavaScript 将不会执行。您可以在此处阅读更多相关信息：

Executing inside retrieved by AJAX Can scripts be inserted with innerHTML?

eval() 解决方案可能看起来像这样，但我认为这是不好的做法：

$.get(url, function(response)           
    var newContent = $(response).find("#right");      //Find the content section of the response
    var contentWrapper = $("#wrap");         //Find the content-wrapper where we are supposed to change the content.
    var oldContent = contentWrapper.find("#right");   //Find the old content which we should replace.

    oldContent.replaceWith(newContent);


    //Find all inline script tags in the new content and loop through them
    newContent.find("script").each(function() 
        var scriptContent = $(this).html(); //Grab the content of this tag
        eval(scriptContent); //Execute the content
    );
);

更好的解决方案是在#right 标记上设置标识符/名称并执行该特定内容所需的代码。

类似：

<div id="right" data-page-name="index">
    <!-- Content -->
</div>

<div id="right" data-page-name="about-us">
    <!-- Content -->
</div>

一个简单的解决方案，只是将页面名称传递给一个函数，该函数将根据页面执行代码，如下所示：

$.get(url, function(response)           
    var newContent = $(response).find("#right");      //Find the content section of the response
    var contentWrapper = $("#wrap");         //Find the content-wrapper where we are supposed to change the content.
    var oldContent = contentWrapper.find("#right");   //Find the old content which we should replace.

    oldContent.replaceWith(newContent);

    var pageName = newContent.attr("data-page-name");

    pageSpecificActions(pageName);
);

function pageSpecificActions(pageName) 
    if (pageName == "index") 
        //Run the code for index page
     else if (pageName == "about-us") 
        //Run the code for about us page.
       
;

这可以防止 JavaScript 代码内联并且不使用 eval()。更好的办法是在页面内容发生变化时使用事件，但现在这已经足够了。

【讨论】：

我尝试了第一种方法（循环通过脚本标签），但由于某种原因它不起作用。我刚刚使用了警报（'test'）；出于测试目的，但它没有弹出警告框。是否可以在您之前在pushstate.staticloud.com/index.htm 设置的示例代码中对其进行测试。就我而言，我正在调用两个页面中包含的外部文件中的 javascript（不是 jquery）函数。谢谢

当我尝试 newContent.find("script").each(function() alert("here"););我没有看到警告框，似乎响应没有检索脚本标签，但是，当我尝试查找（“p”）时，我看到多个警告框...... page1 也包含

它只在#right div中查找脚本标签，如果您想查看整个页面1，您应该这样做：response.find("script")...

很棒的答案。那些 HTML5 数据属性很不错。