如何在动态加载的 HTML 中执行 Javascript答案

【问题标题】：How to execute Javascript in dynamically loaded HTML如何在动态加载的 HTML 中执行 Javascript
【发布时间】：2014-10-13 21:37:07
【问题描述】：

我有一个网页，我在其中动态更改 contentEditor div 中的 HTML，具体取决于用户在导航菜单中选择的主题。这个contentEditor div 中的 HTML 是从外部脚本加载的：

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
new jscolor.color($line.find('input[name=color]')[0], {});
}
/* and so on... */
}

现在一切正常，每个页面都加载了正确的 html。不过我确实有 Javascript 的问题..

我拥有的脚本中的一个文本字段应该是颜色选择器：当我在浏览器中加载页面本身时，颜色选择器可以正常工作，但是当我在 contentEditor div 中加载此页面时，它不会被加载：

颜色选择器是一个外部 Javascript（下载自：http://jscolor.com/download.php）。

我已经尝试将它作为编辑器页面加载到两个主页中（编辑器是我在主页中加载的那个），但这也不能解决问题。

问题当我在另一个 HTML 页面的 div 中加载包含该脚本的页面时，如何确保执行我的 Javascript？

请注意 我在我的主页中加载的编辑器中确实有其他 javascript。那是显示弹出div的javascript。没有任何问题。

任何帮助将不胜感激！

【问题讨论】：

this 是您要找的吗？
感谢您的建议，但恐怕这不是我要找的。当我在浏览器中加载页面本身时，它工作得非常好。仅当我将页面加载到另一个页面中时才会出现此问题。关于我如何解决这个问题的任何想法？
只需在重新加载的 html 上调用您的颜色选择器功能以重新分配选择器，如 onAjaxLoaded(function(data){ setcontent(data); colorpicker(); }) - 编辑确定您的库的问题是您只能使用颜色选择器重新分配整个 html 文档 - 每次您ajax 已加载，您可能会在已修改的元素上设置颜色选择器。
@Imaginedigital 所以，你是说，当你加载 url 时，什么都没有？尝试这样做，使用谷歌浏览器并检查控制台是否有任何错误。
好的，您的 chrome 控制台是否显示任何错误？也许像“没有'Access-Control-Allow-Origin'标头存在......”。

标签： javascript php html css dynamic

【解决方案1】：

您是否尝试在正在加载的脚本中使用window.onload=function(){SomeJavaScriptCode};？

看看这个，beforeload 是您可能正在寻找的：

How do you detect that a script was loaded *and* executed in a chrome extension?

【讨论】：

我知道它没有被加载，因为我添加了一个卸载“alert('loaded')”，当我在另一个页面中加载页面时它不会显示。如何确保它确实被加载？
你试过加载后使用回调函数吗？ if(editingPage == "Homepagina") { $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html", function(response, status, xhr){ if ( status == "success" ) { new jscolor.color($line.find('input[name=color]')[0], {}); } });

【解决方案2】：

你说它没有加载到 contenteditor id 中？请先检查 -> 你使用的是 jQuery 还是 Pure JS

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
}
/* and so on... */
}

从您的代码中，您正在混合 Pure JS 和 jQuery + 不知道您是否使用 jQuery

document.getElementById('contentEditor'); -> Pure JS
$("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery

如果你没有使用 jQuery -> $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery 不会工作

【讨论】：

我正在使用 JQuery。页面本身可以完美加载，唯一的问题是 javascript 无法正常工作。知道我该如何解决吗？如果您需要更多信息，请告诉我
所以你第一次运行的脚本（成功的）在 Homepage9.html 里面？然后你把它加载到 #contentEditor 加载 Homepage9.html 的所有脚本？我建议您将脚本从 Homepage9.html 剪切到加载 Homepage9.html 的主站点
我试过了，显然它不起作用，因为引号相互交叉打断了脚本。