我有未知的HTML,可能会改变每次页面加载,它是从一个API检索。
如何删除其中的所有事件?
html:
<div id="content">
<h2 onclick="alert('hi');">Test 1</h2>
<div onmouseover="alert('hi')">Test 2</div>
</div>
我想让它成为
<div id="content">
<h2>Test 1</h2>
<div>Test 2</div>
</div>
我已经寻找并找到了一个解决方案,但它对我不起作用
var el = document.getElementById('content'),
elClone = el.cloneNode(true);
el.parentNode.replaceChild(elClone, el);
elClone
元素仍然包含事件。如何从给定的html块中删除所有事件?
发布于 2018-06-24 08:26:24
您可以使用类似以下内容来删除属性:
function removeOnAttributes(element)
{
for (var attribute of element.attributes)
if (/^on/i.test(attribute.name))
element.removeAttribute(attribute.name);
for (var element of element.children)
removeOnAttributes(element);
}
removeOnAttributes( content );
content.outerHTML = content.outerHTML; // to remove the other non-atribute event handlers
console.log( content.outerHTML );
<div id="content">
<h2 onclick="alert('hi');">Test 1</h2>
<div onmouseover="alert('hi')">Test 2</div>
</div>
发布于 2018-06-24 07:42:49
所以,如果我没理解错你的问题,你希望在你的JavaScript中有一个函数来实现这个功能:
<div id="content">
<h2 onclick="alert('hi');">Test 1</h2>
<div onmouseover="alert('hi')">Test 2</div>
</div>
如下所示:
<div id="content">
<h2>Test 1</h2>
<div>Test 2</div>
</div>
你所要做的就是:
首先向您的元素添加ID(例如,id="test1"
和id="test2"
)
function funcname() {
document.getElementById("test1").removeAttribute("onclick");
document.getELementById("test2").removeAttribute("onmouseover");
}
然后在你想要的时候调用你的函数,你就设置好了!
即使您不想像我这样做,您所需要的就是removeAttribute();
函数。
发布于 2018-06-24 08:10:35
您说响应来自一个API,然后将其附加到html。你可以看看CSP header它可能适合你的情况,你可以完全删除内联脚本。
无论哪种方式,我相信也有解析器可以帮你做到这一点。
看一看https://code.google.com/archive/p/google-caja/wikis/JsHtmlSanitizer.wiki
https://stackoverflow.com/questions/51005848
复制相似问题