杰晶网络

JS实现iframe自适应高度的方法(兼容IE与FireFox)
网络编程 2024/5/19 佚名
3 2

本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考，具体如下：

之前一直被iframe自适应高度的问题困扰，很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来。我已经用过了，真的好用。尤其是对于我这样的JS水平较低（真不好意思）的人来说，这段代码简单易懂，方便修改，只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面，并且修改一下ID名就行了（注意，要修改的地方有两个，位置在代码中有说明）。

向原创这段代码的朋友致敬。

步骤1：在<body>标签下先输入如下JS代码

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames "iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

步骤2：在iframe标签中加上id="iframe1"onload="adjustFrameSize()"

例如：复制代码 代码如下:<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="/UploadFiles/2021-04-02/iframe1.html">

这段代码有一个小小的缺点，就是使用后iframe中的内容和外边框（如果存在外边框的话）的距离有点小，可以自己适当调整一下；另外，除IE6.0以上版本和FF以外没有测试过其它浏览器，除此之外尚未发现别的缺陷，如果在使用中发现了问题或者有更好解决方法的童鞋欢迎来分享一下。

如果在iframe页面内部含有ajax加载的页面或者通过js动态去添加内容导致iframe高度变化的情况，可以添加一下方式进行：

1：子页面添加以下内容

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

修改dom的部分调用该方法

2：父页面添加

//高度自适应
var iframe = document.getElementById("iframe1");
function iframeHeight() {
  var hash = window.location.hash.slice(1), h;
  if (hash && /height=/.test(hash)) {
    h = hash.replace("height=", "");
    iframe.style.height = h+"px";
    window.location.hash = "#temp";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

标签：
JS,iframe,自适应,高度
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接