Question

假设您通过AJAX加载div的内容。假设它包含修改此元素的各种元素和JS代码。

脚本是否必须等待onload触发，或者只是在之后立即开始修改DOM是否安全？以下示例是否安全？

<form id="foo">...</form>
<script type="text/javascript">
    $("#foo").bar();
</script>

或者我必须始终执行以下操作：

<form id="foo">...</form>
<script type="text/javascript">
    $(function(){
        $("#foo").bar();
    });
</script>

Answer 1

通常情况下，如果您有一个返回带有嵌入式脚本的HTML的异步请求，并将其添加到DOM，脚本将无法运行。但是，jQuery在其ajax代码中具有功能，可以解析这些嵌入式脚本并执行它们。

来自this page：

可以进行不同的数据处理   通过使用dataType选项实现。   除了普通的xml，dataType也可以   html，json，jsonp，script或text。

text和xml类型返回数据   没有处理。数据很简单   传递给成功处理程序，   通过responseText或   responseXML属性   XMLHttpRequest对象，分别为。

注意：我们必须确保MIME   Web服务器报告的类型   匹配我们选择的dataType。在   特别是，XML必须由声明   服务器为text / xml或   application / xml用于一致   结果

如果指定了html，则任何嵌入的   检索到的数据中的JavaScript   在HTML之前执行   以字符串形式返回。同样的，   脚本将执行JavaScript   从服务器撤回，   然后返回脚本本身   文本数据。

由于jQuery将首先执行脚本，因此嵌入式脚本代码将在html添加到dom之前运行。要解决此问题，您应该将包含在函数中的JavaScript代码返回：

function doAfterLoad() {
// ...
}

然后在load或ajax方法的成功回调中调用此函数。

('#result').load('ajax/test.html', function() {
  doAfterLoad();
});

运行嵌入AJAX加载元素的JS时等待onload？

1 个答案: