Question

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

的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的脚本中粘贴一个简单的警告（“”），它也不会执行。

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

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

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

Answer 1

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

    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] );
            }
        }

Answer 2

从外部加载的内容执行的脚本可能存在一些限制。一些Ajax函数会执行它，有些可能不会。出于某种不合理的原因，我希望.load()使用内容选择器而不是执行脚本。这可能是一些无证的，但有意的行为。

请记住，您始终可以使用.load()调用.getScript()的回调函数。

Answer 3

为什么调用JS是加载回调？那会更干净

Answer 4

尝试在文档就绪

上执行该功能

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

可能是因为JS正在尝试执行该功能，同时仍然生成DOM。 IMO，这种方法开始并不是很好。这就像访问私有函数中的公共变量一样。

Answer 5

为什么要在单独的文档中载入？我只是在index.html中将toLoad及其子项设置为你的样式表中的display：none，然后将jQuery show（）和hide（）函数附加到onclick处理程序以使事物显示或消失。

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

5 个答案: