iframe动态添加html

时间 2019-11-17

标签 iframe 动态添加 html 栏目 HTML 繁體版

原文原文链接

最近项目中有个详细预览功能，详细中的某个字段存放的是完整的html，在页面中须要正常展现。html

那么问题来了：app

一、须要展现的html中的样式会与外面的页面冲突。测试

二、直接加载数据中的html，可能存着一些脚本错误。this

首先想到的解决办法是用iframe，可是iframe是直接加载某个页面。因此须要动态的添加html内容到iframe中。spa

$('<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点击相关元素会发生页面跳转等相关事件，须要取消点击触发的原始事件。添加以下代码：code

$(this).click(function (event) {
        event.preventDefault();
    })

经测试，没有效果。因而想起能够经过样式取消点击效果。htm

<style>  
    iframe{  
        pointer-events: none;  
    }  
</style>

可是这样iframe的滚动条也不能点击了，因而想起样式能够加在文档里面，修改代码以下：blog

$('<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不能点击，预期的取消了点击事件的效果。事件