zoukankan      html  css  js  c++  java
  • Iframe高度自适应

    View Code
     1   <script type="text/javascript">
    2 function SetCwinHeight() {
    3 var iframeid = document.getElementById("iframeid"); //iframe id
    4 if (document.getElementById) {
    5 if (iframeid && !window.opera) {
    6 if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
    7 iframeid.height = iframeid.contentDocument.body.offsetHeight;
    8 } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
    9 iframeid.height = iframeid.Document.body.scrollHeight;
    10 }
    11 }
    12 }
    13 }
    14 </script>
    15 <iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="/Help/r_content"></iframe>

    同域时Iframe高度自适应
    下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。

    代码如上,可复制。另外,请注意此解决方案仅供同域名下使用。

    跨域时Iframe高度自适应
    在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。

    原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。

    演示地址:http://www.ccvita.com/usr/uploads/demo/iframe/main.html
    代码下载:http://www.ccvita.com/usr/uploads/demo/iframe/iframe.zip

    iframe主页面main.html

    View Code
    1 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head><title>iframe主页面</title></head>
    4 <body>
    5
    6 <div style="border:1px solid #ccc;padding:10px;"><iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe></div><br />尾部<br /></body>
    7 </html>

    iframe嵌套页面iframe.html

    View Code
     1 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head><title>被iframe嵌套页面</title></head>
    4 <body>
    5
    6 文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
    7
    8 <script type="text/javascript">
    9 function sethash(){
    10 hashH = document.documentElement.scrollHeight;
    11 urlC = "agent.html";
    12 document.getElementById("iframeC").src=urlC+"#"+hashH;
    13 }
    14 window.onload=sethash;
    15 </script>
    16
    17 </body>
    18 </html>

    iframe中介页面agent.html

     1 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head><title>iframe中介页面</title></head>
    4
    5 <body>
    6
    7 <script>
    8 function pseth() {
    9 var iObj = parent.parent.document.getElementById('frame_content');
    10 iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
    11 iObj.style.height = iObjH.split("#")[1]+"px";
    12 }
    13 pseth();
    14 </script>
    15
    16 </body>
    17 </html>

    来源:http://www.ccvita.com/376.html

  • 相关阅读:
    Vue 2.x windows环境下安装
    VSCODE官网下载缓慢或下载失败 解决办法
    angular cli 降级
    Win10 VS2019 设置 以管理员身份运行
    XSHELL 连接 阿里云ECS实例
    Chrome浏览器跨域设置
    DBeaver 执行 mysql 多条语句报错
    DBeaver 连接MySql 8.0 报错 Public Key Retrieval is not allowed
    DBeaver 连接MySql 8.0报错 Unable to load authentication plugin 'caching_sha2_password'
    Linux系统分区
  • 原文地址:https://www.cnblogs.com/zzcong/p/2385021.html
Copyright © 2011-2022 走看看