iframe document.body.style.paddingTop="100px";顶级无效 纯wap可以！非WAP页面就无效 怎么回事

vue调用本地打印的时候打印预览超出首先，为了使打印按钮始终固定显示在页面上部，对id=”print”所在的div的高度进行了计算，使其正好布满剩余屏幕高度。v-html引用的datas是从后端请求来的，由于数据很多，超出了一屏，且其父容器id=”print”设置了：overflow-y: auto;，使id=”print”容器出现了滚动条。

结果，点击打印按钮进行预览时，显示不全，后面的内容没有显示出来。原理：通过阅读vue-print-nb的源码，了解到vue-print-nb获取Id=”print”的内容，然后将这些内容放在了vue-print-nb新建的iframe的body标签中，同时将Id=”print”中的样式放在新建的iframe的style标签中。

然后经过各种转换、兼容，最终调用原生windowprint()执行打印

iframe高度变化内容会重绘的。

项目中遇到这样的情况，需要用到iframe，iframe中的内容也是自己写的页面，由于页面中元素是异步加载出来的，并不能提前预知其高度，这样就不能设置iframe的高度，导致iframe会出现滚动条，用户体验不好。能根据内容动态改变iframe的高度。利用 setInterval 循环计算内容高度，然后给iframe重新设置，这样有缺点，无法得知什么时候才加载完毕，定时器需要一直执行，虽然对性能影响很小，但是不建议这样写。DOMNodeInserted事件是监听dom节点中有新增节点，当内容有新元素插入时，重新设置iframe高度，如果dom结构过于复杂，事件会频繁触发，此时可以配合防抖函数，设置时间为200ms

以上就是关于iframe document.body.style.paddingTop="100px";顶级无效 纯wap可以！非WAP页面就无效 怎么回事全部的内容，包括:iframe document.body.style.paddingTop="100px";顶级无效 纯wap可以！非WAP页面就无效 怎么回事、将vue使用iframe嵌套至html中使用(页面交互传值)、vue调用本地打印的时候打印预览超出等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！