最近項目中有個詳細預覽功能，詳細中的某個字段存放的是完整的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不能點擊，預期的取消了點擊事件的效果。