iframe

vue组件和iframe页面的相互传参问题 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件，子iframe文件也是html文件，涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白； 而最近我在项目中碰到了这种需求： 在vue组件中嵌入iframe页面，并实现父子传参； vue组件调用iframe页面方法和参数 下面是在 vue组件中（父组件） 一个通过点击按钮触发的方法： sentToIframe ( ) { let childFrameObj = document . getElementById ( "unityiframe" ) ; console . log ( "childFrameObj" , childFrameObj ) ; // childFrameObj.contentWindow.getMessageFromParent(this.tData); //第一种向子iFrame传参方式，调用iframe的methods达到传参的目的 this . $refs . unity . contentWindow . getMessageFromParent ( this . tData ) ; // 这样也是可以调用子iframe的方法 // childFrameObj.contentWindow.frameData

批量打印，同时打印多个页面，有两种思路： 第一种思路，将所有的页面内容加载到一个页面中，然后再打印。这种打印方式有几个弊端，页面的样式会丢失，页面太多同时加载到一个页面中，数据量太大，响应时间很长，消耗的资源过大，很可能导致浏览器崩溃，最终打印失败。针对这种打印方式的弊端，可以通过限制批量打印数量的方法来避免。但样式的问题，似乎找不到解决方案。 第二种思路，调用每个页面直接打印方法，逐个页面打印。这种打印方式的弊端就是，调用每个页面的打印方法都会弹出框，等待用户确认打印才行。 1>第一种思路 第一步：将所有页面通过iframe加载到一个页面中，每个页面一个iframe 第二部：抓取每个iframe中的内容，将其加载到一个新的窗口中，每个ifrmae中的内容在打印的时候都强制分页 第三部：调用新窗口的打印方法。 代码如下： $(function () { //在iframe中显示需要打印的页面，设置iframe的高度为自适应高度 $("iframe").each(function () { $(this).load(function () { $(this).height($(this).contents()[0].body.scrollHeight); }); }); }); //将所有iframe中的内容都加载到一个新的窗口中，然后调用新窗口的打印方法 function

最近在做一个项目，项目的大概模式列表，新建，编辑以及删除功能。其中新建编辑页面都是以弹框的形式展示，所以就选用了layUI的弹出层这个组件。因为新建编辑涉及的逻辑比较多，所以自然而然的选用了弹出层类型为iframe层（即type:2）的模式，因为在这种模式下相当于新建了一个iframe层，所以其他组件的重复使用不会有影响。而在新建页面中还有一些小列表，也需要以弹出层的形式进行添加的操作，感觉涉及的逻辑不太多（ 其实是感觉错了 ） ，在加上不想创建新的页面，所以就使用了type=1的页面层了。在小列表的弹出层中也有分页的功能，这就使得多个小列表的弹出层分页展示会受到影响。所以就想到使用iframe层来隔断这些影响。。。。。。。。。。。。。。。 　　　但是，，，，，，，，，这样的话就会存在父子之间传值的问题，，，，，，在搜索了一番文档之后，找到了一种解决办法： 获取的子页面的内容，将需要的参数隐藏在子页面中，通过$('#')的方法获取， 结果证明是对的。 　　　　页面写法： 　　　　　　 　　　　父级js写法 　　　　　　 来源： https://www.cnblogs.com/web-cuicui/p/12170693.html