Question

这更像是一个设计问题。

我在页面$(document).ready()和页面A.html调用的.js文件中的B.html内部有一些jQuery代码，并且正常工作。

在页面A.html上有一个链接，可以通过ajax使用bootstrap模式打开B.html。

网页B.html在页面A.html上按照预期的模式打开，然而B.html的所有javascript都没有呈现，即使它已经在那里。 < / p>

所以，我当前的解决方法是让它工作，这对我来说感觉不太自然，就是把所有代码都放到这样的函数中。

$.fn.myFunction = function() {
  // my code here
};

然后检测ajax，执行eval并再次调用该方法

$(".btn-that-opens-modal").on("ajax:success", function(e, data, status, xhr) {
  eval(xhr.responseText);
  $("body").MyFunction();
});

有没有更好的方法来实现这一目标？

Answer 1

只要符合cross-origin resource sharing (CORS)要求，jQuery AJAX调用将在DOM中插入时执行JavaScript。

例如，如果以下同时服务器和不使用file://协议，则可以正常工作：

A.html：

<sript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('#my-modal').load('B.html');
    });
</script>
<div id="my-modal"></div>
<div id="test"></div>

B.html：

<h1>B Modal</h1>
<script>
    // note that it's not necessary to wrap this in a $(document).ready
    // function; since this is designed to be loaded by jQuery AJAX from
    // a $(document).ready function, we can assume the document is ready.
    // however, it won't hurt or cause any issues to use a $(document).ready
    // function here
    $('#test').html('I come from B...');
</script>

请注意两个重要的警告：

A.html和B.html位于同一台服务器上（或Access-Control-Allow-Origin标头设置正确）：

如果A.html尝试通过AJAX从其他服务器加载B.html，则该请求受CORS约束。除非在提供Access-Control-Allow-Origin的服务器上配置了适当的标头（B.html），否则浏览器将拒绝加载它（包括执行JavaScript）。

您无法使用file://协议：

如果您只是创建.html个文件，然后在浏览器中加载它们（通过双击等），您可以使用file://隐式加载它们协议。至少在Chrome上，您不允许使用file://协议加载AJAX脚本。因此，您必须实际设置服务器才能使此功能正常工作。

我使用以下Node / Express应用程序测试了此代码：

var express = require('express');

var app = express();

app.get('/a(.html)?', function(req, res) {
    res.sendfile('A.html');
});

app.get('/b(.html)?', function(req, res) {
    res.sendfile('B.html');
});

app.listen(3000, function() {
    console.log('listening on 3000');
});

它按预期工作。

Answer 2

如果您是从域以外的其他地方获取javascript，则javascript将无法运行，这是由same origin policy引起的。如果你从ajax的某个第三方获取一个页面，他们可以嵌入恶意javascript，如果你的浏览器立即执行它你会遇到一些问题....如果你需要从你的域以外的地方检索脚本请使用Ethan Browns的答案。但是，如果从您的域中检索到嵌入了javascript的html，那么javascript应该运行。例如，如果我有index.html和modal.html。

的index.html

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="fetch-modal">modal popup</div>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $('#fetch-modal').click(function(e) 
      $.ajax({
        type: 'get',
        url: 'modal.html',
        success: function(html) {
          $('body').append(html);
        }
      });
    });
  </script>
</body>
</html>

modal.html

<script>
   console.log('hey');
</script>

单击div＃链接时，嵌入式脚本将附加到index.html的主体，控制台将注销“嘿”。我希望通过我的编辑前答案进一步澄清我想说的内容。我为不清楚和错误道歉。

第二页通过ajax打开而不是触发javascript

2 个答案: