如何动态包含包含 javascript 的 html 文件答案

【问题标题】：How to dynamically include a html file containing javascript如何动态包含包含 javascript 的 html 文件
【发布时间】：2013-09-04 14:49:39
【问题描述】：

在我的网站中，我有一个简单的导航栏，点击不同的项目会导致主要内容发生变化。从技术上讲，所有内容都在一个文件“main.html”中完成，该文件包含所有内容，我使用 jquery 函数“load”动态加载其他 html 文件以将其放置在 main.html 中。只要我嵌入的这些 html 文件中没有 javascript，它就可以正常工作。但是我想嵌入一个文件，其中也包含 javascript 代码，应该在 $(document).ready 上执行。但这永远不会发生 - javascript 中没有错误，它永远不会被执行。我想这是因为我只更改了“main.html”的 DOM，然后不会触发“onReady”事件。有人可以告诉我什么是获得所需行为的最佳方法吗？将 javascript 放在“main.html”中会导致工作正常，但这对我来说不是选择。

提前致谢！

更新：问题已解决 问题解决了。当我在 onReady() 事件之外调用 javascript 时（正如 Loic Coenen 所建议的那样），它的工作原理与预期的一样。我还删除了缠绕的标签。非常感谢所有帮助过我的人！

【问题讨论】：

也许使用 iframe 但也不是最好的主意。
这是什么类型的Javascript？您能否发布您所包含的代码（或至少是未执行的 JavaScript 部分）？请注意，$(document).ready 事件仅在您的 main.html 最初准备就绪时触发，而不是在动态加载内容时触发。

标签： javascript jquery html dynamic

【解决方案1】：

您可以触发自定义事件来通知您的other.html 脚本树已加载。我还没有尝试过，但我会使用类似的东西：

在 main.html 中：

$('#div_to_load').load('other.html',{},function(){
    $('#div_to_load').trigger('loaded')
})

在 other.html

$('#div_to_load').on('loaded', function(){
     // Code to execute  
})

我不知道这样能不能解决问题。

编辑：我认为直接包含在您的other.html 中的 javascript 无论如何都会执行。

【讨论】：

你的假设是正确的。当我在 onReady() 事件之外调用 javascript 时，它就像预期的那样工作。我还删除了包裹的标签。非常感谢所有帮助过我的人！
哦，请确保要执行的脚本放在 other.html 文件的末尾，以确保在需要时元素存在于 DOM 中。
完成 :) 感谢您的建议，我确实将脚本放在了顶部，并且想知道为什么有些东西仍然连线，但是在更改后一切正常 :)

【解决方案2】：

您在main.html 中，其中包含一个头部、身体。问题可能是当您加载页面时，您的其他页面也有头部和主体等，如果您正在加载到 div，它应该只是代码，也可以是 javascript，但没有头部或主体。但如果你抗拒，这就是你的解决方案

$("#loadnewpagebttn").load(location.href+" foobar ",function(){
    $.getScript("js/yourscript.js"); 
});

您需要为该页面创建一个脚本文件并加载它。无论如何，内联脚本都是个坏习惯

完整示例：

jQuery.getScript( url, [ success(data, textStatus) ] )
url - A string containing the URL to which the request is sent.

success(data, textStatus) - A callback function that is executed if the request succeeds.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

http://api.jquery.com/jQuery.getScript/

【讨论】：