加载外部 html 文件到 div 并使用它的 js 函数答案

【问题标题】：Load external html file to div and use its js functions加载外部 html 文件到 div 并使用它的 js 函数
【发布时间】：2013-02-13 08:49:31
【问题描述】：

我有一些 div：

<div id='dialog'></div>

现在我想在这个 div 中加载一个外部 html 文件并使用它的 js 函数。

我知道我可以使用 jQuery.Load() 加载它，它工作正常，问题是我想使用 html js 函数。

主要问题是我有几个 div，我将这个 html 文件加载到其中，我希望当我激活 js 函数时它只能在特定的 div 上工作。

【问题讨论】：

【解决方案1】：

将参数传递给您正在加载的视图，该参数将指示已加载视图的容器：

jQuery.Load(url, { containerId: 'dialog' })

【讨论】：

【解决方案2】：

我记得在发布 jQuery1.4 时我遇到了问题。在那个版本中，.load() 在指定目标容器时突然开始剥离 js。

我当时做了什么：

在不同的文件（比如 myhtml.html 和 myjs.js）或视图中分离 html 和 js
让我的 js 文件作为一个 js 模块，使用一个公共入口点函数（比如initContent）将 jQuery 元素作为参数
在myhtml.html中有一个不可见的链接，即<a href="myjs.js#initContent" class="dynamicJs" style="display:none;"></a>
将myhtml.html加载到我的目标div后，在我的目标div中搜索$('a.dynamicJs')以提取js url，并从href中提取入口点函数
如果之前没有加载过 js，则通过 ajax 调用将 js 动态加载到页面中
以目标div为参数动态调用入口函数

这也适用于 css。它需要一些时间在所有导航器上进行调整（IE 上的 css 部分数量有限，动态调用函数的方式不同），最后我得到了更多我期望的代码。它还需要对我的 html/js 模块进行大量重构（但我必须承认，我最终得到了一个非常干净的代码）

我确信现在有一些框架可以更好地处理这种情况。但这是我当时想出来的。

希望这会有所帮助

【讨论】：