iframe高度自适应

- 日理万妓 2023-06-02 14:00 91阅读 0赞

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面

为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe高度自适应。

js代码

  1. function setIframeHeight(iframe) {
  2. 　　if (iframe) {
  4. 　　　　/*
  5. 　　　　　　contentDocument是获得iframe子窗口的document对象，兼容Firefox和ie8+
  6. 　　　　　　contentWindow是获得子窗口的window对象，兼容大部分浏览器
  7. 　　　　*/
  9. 　　　　var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
  10. 　　　　if (iframeWin.document.body) {
  11. 　　　　　　iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
  12. 　　　　}
  13. 　　}
  14. };
  16. //获取子页面的高度
  17. window.onload = function () {
  18. 　　setIframeHeight(document.getElementById('external-frame'));
  19. };

html

  1. <iframe id="iframe-center" scrolling="yes" rameborder="0" src="center.html" name="centerPage"class="pull-left" οnlοad="setIframeHeight(this)"></iframe>

详情参考：http://caibaojian.com/iframe-adjust-content-height.html?tdsourcetag=s_pctim_aiomsg

转载于:https://www.cnblogs.com/sunchunmei/p/11333441.html

发表评论

表情：
评论列表 （有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

    相关 iframe高度自适应

    前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面 为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe

    - 日理万妓- 日理万妓/ 0 赞/ 92 阅读

    相关 iframe自适应高度

    [JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 393 阅读

    相关 iframe框架高度自适应

    在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；

    超、凢脫俗超、凢脫俗/ 0 赞/ 399 阅读