如何在构建HTML时精简JavaScript代码？

Question

我想要解析一些HTML，以找到其中的图片。

例如，我创建了一个动态的 div 并以此方式解析标签：

var tmpDiv = document.createElement("DIV");
tmpDiv.innerHTML = html;

HTML应该没有脚本，但也有例外情况。在一个代码段中，图像标签下有以下代码：

<img src=\"path" onload=\"NcodeImageResizer.createOn(this);\" /> 

通过创建一个临时的 div，"onload" 函数会自动调用并创建 JavaScript 错误。

有没有办法告诉浏览器在构建 HTML 元素时忽略 JavaScript 代码？ 编辑：
我忘了提到后来我想在我的文档中的一个 div 中显示这个 HTML，所以我正在寻找一种忽略脚本而不使用字符串操作的方法。

谢谢！

- Omer

---

如果 onload 仍然是相同的，您可以使用 tmpDiv.innerHtml = html.replace('onload="NcodeImageResizer.createOn(this);',"")。 - Marek Sebera

那可以解决这个特定的情况，但我正在寻找一种通用的解决方案，可以涵盖其他所有情况。 - Omer

每个其他情况是什么？所有的onload处理程序？所有的什么？ - jfriend00

所有其他情况下从HTML中隐式调用的脚本（不是在JavaScript标签内部的脚本） - Omer

Answer 1

一种做法是循环遍历 div 的子元素，去掉想要的事件处理程序。

考虑以下内容：

我们有一个包含某些 HTML 的变量，其中内联附有一个 onload 事件处理程序。

var html = "<img src=\"http://www.puppiesden.com/pics/1/doberman-puppy5.jpg\" 
alt=\"\" onload=\"alert('hello')\" />"

当我们创建一个容器来放置这个HTML时，我们可以循环遍历子元素并删除相关的事件处理程序：

var newDiv = document.createElement("div");
$(newDiv).html(html);
$(newDiv).children().each(function(){this.onload = null});

这是一个可运行的示例：http://jsfiddle.net/XWrP3/ 更新：问题提出者想要同时删除其他事件。据我所知，没有一种自动删除所有事件的方法，但您可以根据需要将每个事件简单地设置为null。

$(newDiv).children().each(function(){
    this.onload = null;
    this.onchange = null;
    this.onclick = null;
});

- Jamie Dixon

---

谢谢，正如我在最新评论中写的那样，我正在寻找一种方法来删除所有事件，因为我的最终目标是展示HTML和脚本可以触发各种事件。 - Omer

你可以使用这种方式移除任意数量的事件。没有通用的方法来移除所有的事件。你只需要将你关心的每个事件设置为 null。 - Jamie Dixon

哦，太糟糕了，那我想我得手动写它们了。再次感谢。 - Omer

Answer 2

你可以使用jQuery非常容易地完成它，就像这样：

编辑：

HTML

<div id="content" style="display:none">
    <!-- dynamic -->
</div>

js

$("#content").append(
    $(html_string).find('img').each(function(){
        $(this).removeAttr("onload");
        console.log($(this).attr("src"));
    })
);

- Ilia Choly

---

谢谢，但对我没有用，它与创建一个div的效果相同。我忘了提到我想稍后显示这个HTML，所以我正在寻找另一种解决方案。（你得到了我的赞） - Omer

已更新。我相信当解析时，jQuery会剥离<script>标签。 - Ilia Choly

可能是这样，但问题在于，我的代码中根本没有任何脚本标签。 - Omer

谢谢你的帮助，伙计。这可能会解决问题，但是当我显示HTML时，可能会有大量其他事件可以触发脚本。有没有一种方法可以从对象中删除所有事件？ - Omer

$(html_string).children().die().unbind().removeAttr("onclick").removeAttr("onload") 等等... - Ilia Choly