如何在构建HTML时剥离JavaScript代码?

How can I strip down JavaScript code while building HTML?

本文关键字：剥离 JavaScript 代码 HTML 构建      更新时间：2023-09-26

我正在尝试解析一些HTML来查找其中的图像。

例如，我创建了一个动态的div，并像这样解析标签: 
var tmpDiv = document.createElement("DIV");
tmpDiv.innerHTML = html;

HTML应该是无脚本的，但也有例外，一个代码段在图像标签下有以下代码:

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

通过创建一个临时div，"onload"函数调用自己，它创建了一个JavaScript错误。

是否有告诉浏览器忽略JavaScript代码，而构建HTML元素?

编辑:


我忘了提到，以后我想在我的文档中显示div内的这个HTML，所以我正在寻找一种方法来忽略脚本，而不是使用字符串操作。

谢谢!

这样做的一种方法是遍历div的子元素并删除所需的事件处理程序。

考虑以下内容:

我们有一个包含一些HTML的变量，这些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/

OP要求同时删除其他事件。据我所知，没有办法以自动方式删除所有事件，但你可以简单地将每个事件设置为null根据需要:

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

使用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"));
    })
);
相关文章：