JQuery .get不执行Javascript [英] JQuery .get doesnt execute Javascript

问题描述

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

I am using JQuery .get method to retrieve some content from a webpage (page 1) and show it in a div in the main page. The problem is the content retrieved contains some javascript calls. The content is being displayed, but the Javascript methods are not getting executed. The .js file is being referenced across all the pages, so the availability of the js in the main is not a problem.

这是主页面中的代码。页面1的URL被赋予.get函数：

This is the code in the main page. URL of page 1 is given to the .get function:

$.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）中的代码

This is the code in the #right (div) of Page 1

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

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

The functions abc7 and s are available in a .js (normal javascript file) that is being reference in the section of all pages

s（30）应显示大小为30的文本字段。

The s(30) should display a text field of size 30.

推荐答案

除非您在其上运行 eval（），否则不会执行内联JavaScript。你可以在这里阅读更多相关内容：

Inline JavaScript won't execute unless you run eval() on it. You can read more about that here:

• 执行由AJAX检索的内部


• 可以使用innerHTML插入脚本吗？

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

An eval（）解决方案看起来像这样，但我认为这是不好的做法：

An eval() solution could look something like this, but I would consider it bad practice:

$.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 <上设置标识符/名称/ code>标记并执行该特定内容所需的代码。

A better solution is to set a identifier/name on the #right tag and execute the code needed for that specific content.

类似于：

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

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

一个简单的解决方案，只是将页面名称传递给将根据页面执行代码的函数看起来像这样：

A simple solution that just passes the page name to a function that will execute the code depending on page would look something like this:

$.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（ ）。更好的方法是在页面内容发生变化时使用事件，但现在这已足够了。

This keeps the JavaScript code from being inline and doesn't use eval(). Even better would be to use events for when page content change, but this will be enough for now.

这篇关于JQuery .get不执行Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！