在日常的开发中,我们经常会遇到一些老项目开发新功能,我们不想按照之前的框架写,这时候就可以自己引入一个vue实例化的html文件,独立进行开发,互不干扰。
1、首先,可直接使用或使用document.write的方式在页面中引入,适用多个场景
直接使用:
下面展示一些 内联代码片
。
<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>
使用document.write的方式使用:
<script>document.write("<iframe class='J_iframe' name='iframeA' width='100%' height='100%' style='width: 100% !important;' id='iframe' src='/components/weilan.html' frameborder='0' data-id='frame.html' seamless> </iframe>")</script>
2、iframe外调用iframe里面方法并传值(html实例化vue中使用方式,参考)
iframeA.window.app2.drawWindow();
3、iframe内调用iframe外方法并传值(html实例化vue中使用方式,参考)
parent.window.app.closeWeilan();
4、获取iframe中的内容
var iframe = document.getElementById("myFrame"); //获取iframe标签 var iwindow = iframe.contentWindow; //获取iframe的window对象 var idoc = iwindow.document; //获取iframe的document对象 console.log(idoc.documentElement); //获取iframe的html console.log("body",idoc.body);
iframe常用属性如下,可以根据自己需求使用: