欢迎访问晨星博客！

    • 当前位置： 首页 Web前端 正文

    【代码】iframe嵌入页面自适应目标页面的高度

    |
    评论 1 条
    JavaScript
    文章目录
    1. 方案一
    2. 方案二

    今天在给用户做一个布局时遇到一个问题，当使用html5的iframe标签做页面嵌入动作时，页面的搞定没有办法设置为源页面的搞定，这可是一个头疼的问题，不显示滚动条吧内容显示不全，如果显示严重影响美观，最后翻看了html5关于iframe的文档，但是官方并没有满足该要求的属性，没办法只用用js做一个动态调用了。下面我们就来看看如何用js来搞定这个问题的。

    方案一

    这个是在网上查找到的教程，用的JavaScript来获取源页面的高度然后赋值给iframe标签中的heaght元素实现自使用高度。

    代码

    1. <!–html代码  在代码中需要添加一个 onload=”iFrameHeight();” 参数用来获取高度值   还有一个 id=”iframe” 让js识别–>
    2. <iframe src=“../chenxing.html” id=“iframe” frameborder=“0” scrolling=“no” onload=“iFrameHeight();” width=“100%”></iframe>
    3. <!–js代码 放置到页面body标签中即可–>
    4. function iFrameHeight() {
    5.     var ifm = document.getElementById(“iframe”);
    6.     var subWeb = document.frames ? document.frames[“iframe”].document : ifm.contentDocument;
    7.     if (ifm != null && subWeb != null) {
    8.          ifm.height = subWeb.body.scrollHeight;
    9.     }
    10. }

    优点：

    1. 无需加载jQuery库简单易操作；

    缺点：

    1. 需要判断浏览器的高度，处理逻辑稍有复杂；

    方案二

    使用jQuery的方式实现，现在大多数网站都是基于jQuery开发的，一般都调用了jQuery库，所以用这个方法非常实用，而且用jQuery实现比JavaScript性能要好。

    引用页面放置以下代码

    1. //注意：下面的代码是放在iframe引用的子页面中调用
    2. $(window.parent.document).find(“#iframe”).load(function(){
    3. var main = $(window.parent.document).find(“#iframe”);
    4. var thisheight = $(document).height()+30;
    5. main.height(thisheight);
    6. });

    目标页面放置代码

    1. //注意：下面的代码是放在和iframe同一个页面调用
    2. $(“#iframe”).load(function(){
    3. var mainheight = $(this).contents().find(“body”).height()+30;
    4. $(this).height(mainheight);
    5. });
    这个方法布置代码比较难，要改两个页面，但是性能好，所以大家仔细甄选看看那个适合自己使用。

    声明：原创文章请勿转载，如需转载请注明出处！

    上一篇
    下一篇
    • 您可能喜欢得内容：
    • 共 1 条评论

    默认头像游客
    请登陆后再发表您的观点吧！

    最新评论

    1. 免费建设，免费建设个人+公司网站 7年前

      要是学的不好，还是直接请人做好了。【我们免费建站】

    账号登陆

    快捷登陆
    热搜词