Jquery - 使用.load和selector加载页面不执行脚本？

问题描述：

我正在尝试使用.load（）方法将一个页面加载到另一个页面。这个加载的页面包含一个我想在加载完成后执行的脚本。我已经整理了一个准系统示例来证明：

I'm trying to load one page into another using the .load() method. This loaded page contains a script that I want to execute when it has finished loading. I've put together a barebones example to demonstrate:

Index.html：

<html>
<head>
 <title>Jquery Test</title>
 <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function()
  {
    $('#nav a').click(function()
    {
      $('#contentHolder').load('content.html #toLoad', '', function() {});        
      return false;
    });
  });
 </script>    
</head>
<body>
 <div id="nav">
  <a href="content.html">Click me!</a>
 </div>
 <hr />
 <div id="contentHolder">
  Content loaded will go here
 </div>
</body>
</html>

Content.html：

<div id="toLoad">
 This content is from content.html

 <div id="contentDiv">
    This should fade away.
 </div>

 <script type="text/javascript">
  $('#contentDiv').fadeOut('slow', function() {} );
 </script>
</div>

单击链接时，内容应加载，第二段应逐渐消失。但它不会执行。如果我在content.html的脚本中粘贴一个简单的警告（）它也不会执行。

When the link is clicked, the content should load and the second paragraph should fade away. However it doesn't execute. If I stick a simple alert("") in the script of content.html it doesn't execute either.

但是，如果我取消#toLoad选择器在.load（）调用中，它工作正常。我不知道为什么会这样，因为块显然属于#toLoad div的范围。我不想避免使用选择器，因为实际上content.html将是一个完整的HTML页面，我只想要一个选择部分。

However, if I do away with the #toLoad selector in the .load() call, it works fine. I am not sure why this is, as the block is clearly in the scope of the #toLoad div. I don't want to avoid using the selector, as in reality the content.html will be a full HTML page, and I'll only want a select part out of it.

有什么想法吗？如果来自content.html的脚本在.load（）回调中，它工作正常，但我显然不希望index.html中包含该逻辑。

Any ideas? If the script from content.html was in the .load() callback, it works fine, however I obviously don't want that logic contained within index.html.

我可能有回调使用.getScript（）来加载content.html.js然后在那里有逻辑，这似乎工作？如果可能的话，我宁愿将脚本保留在content.html中，以便在正常加载时它也能正常运行。事实上，我可能会这样做，但我想知道为什么以上不起作用。

I could possibly have the callback use .getScript() to load "content.html.js" afterwards and have the logic in there, that seems to work? I'd prefer to keep the script in content.html, if possible, so that it executes fine when loaded normally too. In fact, I might do this anyway, but I would like to know why the above doesn't work.

答

如果查看jquery源代码，您会看到.load（）方法只是从加载的内容中删除所有脚本（如果指定了选择器）。

If you look at the jquery source, you will see that the .load() method simply removes all scripts from the loaded content (if a selector was specified).

    jQuery.ajax({
        url: url,
        type: type,
        dataType: "html",
        data: params,
        complete: function( res, status ) {
            // If successful, inject the HTML into all the matched elements
            if ( status === "success" || status === "notmodified" ) {
                // See if a selector was specified
                self.html( selector ?
                    // Create a dummy div to hold the results
                    jQuery("<div />")
                        // inject the contents of the document in, removing the scripts
                        // to avoid any 'Permission Denied' errors in IE
                        .append(res.responseText.replace(rscript, ""))

                        // Locate the specified elements
                        .find(selector) :

                    // If not, just inject the full result
                    res.responseText );
            }

            if ( callback ) {
                self.each( callback, [res.responseText, status, res] );
            }
        }

Jquery - 使用.load和selector加载页面不执行脚本？

相关推荐