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

Question

我有一个网页，我在其中动态更改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。这没有任何问题。

任何帮助都将受到高度赞赏！

Answer 1

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

看看这个，你可能正在寻找beforeload：

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

Answer 2

你说它没有加载到contenteditor id？ 请先检查 - ＆gt;你在使用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 - ＆gt; $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery 将无法正常工作