iframe动态添加html
最近项目中有个详细预览功能，详细中的某个字段存放的是完整的html，在页面中需要正常展示。
那么问题来了：
1、需要展示的html中的样式会与外面的页面冲突。
2、直接加载数据中的html，可能存着一些脚本错误。
首先想到的解决办法是用iframe，但是iframe是直接加载某个页面。所以需要动态的添加html内容到iframe中。
$('<p><iframe id="myFrame" src="crawler_data_iframe.html" width="500px" height="200px;" ></iframe></p>').appendTo($(div));
var o = document.getElementById("myFrame");
ed = document.all ? o.contentWindow.document : o.contentDocument;
ed.open();
ed.write(data);
ed.close();
ed.contentEditable = true;
ed.designMode = 'on';
经测试能正常显示html的内容。然而发现iframe中的html点击相关元素会发生页面跳转等相关事件，需要取消点击触发的原始事件。添加如下代码：
$(this).click(function (event) { event.preventDefault(); })
经测试，没有效果。于是想起可以通过样式取消点击效果。
<style> iframe{ pointer-events: none; } </style>
但是这样iframe的滚动条也不能点击了，于是想起样式可以加在文档里面，修改代码如下：
$('<p><iframe id="myFrame" src="crawler_data_iframe.html" width="500px" height="200px;" ></iframe></p>').appendTo($(div));
var o = document.getElementById("myFrame");
ed = document.all ? o.contentWindow.document : o.contentDocument;
ed.open();
ed.write(` <!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
#data_id{
pointer-events: none;
}
</style>
</head>
<body>
<div id="data_id">${data}</div>
</body>
</html>`);
ed.close();
ed.contentEditable = true;
ed.designMode = 'on';
经测试，iframe中的html不能点击，预期的取消了点击事件的效果。
