精华内容
下载资源
问答
  • 是我在nebear的博客里面看到的,原文: 完美实现跨域Iframe高度自适应Iframe跨域高度自适应解决方案】<html> <head> <style> body {margin-left: 0px;margin-top: 0...

    这是一种比较简单比较容易实现的方法,只需要设置css样式就可以实现。

    是我在nebear的博客里面看到的,原文: 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    <html>  
    <head>  
    <style>  
    body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}  
    </style>  
    </head>  
      
    <body>  
    <iframe src='http://hi.baidu.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" ></iframe>  
      
    </body>  
      
    </html>  

    但是需要注意的两点:

    1.文件头必须是一<html>开头

    2.scrolling不能为no,否则嵌入的网页不能往下滚;高度设置height:100%;

    原文中说body里面的overflow: hidden;不能省略,但是经过我的测试发现其实可以省略


    展开全文
  • Iframe 高度自适应, js控制Iframe 高度自适应, iframe自适应高度 ================================ ©Copyright 蕃薯耀 2019年12月31日 http://fanshuyao.iteye.com/ 方法一:js控制Iframe 高度自适应 这个方法之前...

     Iframe 高度自适应, js控制Iframe 高度自适应, iframe自适应高度

    ================================

    ©Copyright 蕃薯耀 2019年12月31日

    http://fanshuyao.iteye.com/

    方法一:js控制Iframe 高度自适应

    这个方法之前一直都在用,没有问题,但最新发现有些情况不行(具体原因不清楚)

    /*
    function thisIframeHeightAuto(){
        setIframeHeight("auditList");
    };
     */
    //window.setInterval("iframeHeightAuto()", 200);
    function setIframeHeight(iframeId){
        var cwin = document.getElementById(iframeId);
        if(document.getElementById){
            if(cwin && !window.opera){
                if(cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
                    cwin.height = cwin.contentDocument.body.offsetHeight;//FF NS
                    console.log("FF NS cwin.height=" +cwin.height);
                }else if(cwin.Document && cwin.Document.body.scrollHeight){
                    cwin.height = cwin.Document.body.scrollHeight;//IE
                    console.log("IE cwin.height=" +cwin.height);
                }
            }else if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight){
                cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
            }
        }
        console.log("cwin.height=" + cwin.height);
    };
    

    方法二:html代码控制

    在方法一不生效的时候,使用了方法二。

    头部的html不需要任何的声明,都去掉,如下面代码所示:

    <html>
    <head>
    <meta charset="UTF-8">
    <title>iframe高度自适应</title>
    </head>
    <body>
    
        <div class="mt20">
            <iframe id="mapIframe" border="0" frameborder="0" scrolling="no" 
                width="100%" height="100%" style="padding: 0;margin: 0;" ></iframe>
        </div>
    
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    </body>
    </html>
    

    上面如果能自适应,就不需要下面的;如果上面还不自适应,需要设置

    1、body样式中的 overflow: hidden; 绝对不对省略;

    2、Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes,不用设置即可)

     方法三:同样是js控制(未验证)

    原理:

    Iframe页面的内容利用一个<div id="iframeContent">进行包裹,div会自适应内部高度,因此,可以通过div实现子页面高度的获取。

    Iframe页面

    <body>
    <div id="iframeContent">
        ...
    </div>
    <body>
    

    父页面(嵌入Iframe的页面)增加js:

    //跨域或子页面无"iframeContent"则高度不能自适应
    function reinitIframe(iframeId, minHeight) {
        try {
            var iframe = document.getElementById(iframeId);
            var height = iframe.contentWindow.document.getElementById("iframeContent").offsetHeight;
            if (!height) {
                height = minHeight;
            }
            if (height < minHeight) {
                height = minHeight;
            }
            iframe.style.height = height + "px";
        } catch (e) {
            iframe.style.height =  minHeight + "px";
        }
    }
    

      方法四:同样是js控制(未验证)

    var browserVersion = window.navigator.userAgent.toUpperCase();
    var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
    var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
    var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
    var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
    var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
    var isIE9More = (! -[1,] == false);
    function reinitIframe(iframeId, minHeight) {
        try {
            var iframe = document.getElementById(iframeId);
            var bHeight = 0;
            if (isChrome == false && isSafari == false) {
                try {
                    bHeight = iframe.contentWindow.document.body.scrollHeight;
                } catch (ex) {                
                }
            }
            var dHeight = 0;
            if (isFireFox == true)
                dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
            else if (isIE == false && isOpera == false && iframe.contentWindow) {
                try {
                    dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                } catch (ex) {
                }
            }
            else if (isIE == true && isIE9More) {//ie9+
                var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
                if (heightDeviation == 0) {
                    bHeight += 3;
                } else if (heightDeviation != 3) {
                    eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                    bHeight += 3;
                }
            }
            else//ie[6-8]、OPERA
                bHeight += 3;
    
            var height = Math.max(bHeight, dHeight);
            if (height < minHeight) height = minHeight;
            //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
            iframe.style.height = height + "px";
        } catch (ex) { }
    }
    
    //定时任务
    function startInit(iframeId, minHeight) {
        eval("window.IE9MoreRealHeight" + iframeId + "=0");
        window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
    }
    

    (如果你觉得文章对你有帮助,欢迎捐赠,^_^,谢谢!) 

    ================================

    ©Copyright 蕃薯耀 2019年12月31日

    http://fanshuyao.iteye.com/

    展开全文
  • iframe高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
  • 跨域问题是由于javascript语言安全限制中的同源策略造成的。出于安全方面的考虑,不允许跨域调用其他页面的对象...此时就需要双方技术共同解决,利用iframe和location.hash方法。在a域名下,添加一个判断页agent.ht...

    跨域问题是由于javascript语言安全限制中的同源策略造成的。出于安全方面的考虑,不允许跨域调用其他页面的对象。

    例如:a域名下,www.a.com/index.html需要引用b域名下,www.b.com/quote.html页面,但引用的这个b域名下页面里面内容高度不确定。此时就需要双方技术共同解决,利用iframe和location.hash方法。

    在a域名下,添加一个判断页agent.html,添加以下代码:

    function pseth() {

    var iObj = parent.parent.document.getElementById('iframeB'); //A和main同域,所以可以访问节点

    iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash; //访问自己的location对象获取hash值

    iObj.style.height = iObjH.split("#")[1]+"px"; //操作dom

    }

    pseth();

    在b域名,quote页面中添加如下代码:

    function sethash(){

    hashH = document.documentElement.scrollHeight; //获取自身高度

    urlC = "http://www.a.com/agent.html"; //设置iframeA的src

    document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递

    }

    window.οnlοad=sethash;

    在a域名,index页面中添加如下代码:

    感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - iframe跨域 自适应高度

    展开全文
  • iframe自适应与iframe跨域自适应
    <iframe id="dataLoad" name="dataLoad" scrolling="no"
        frameborder="no" style="border: 0px;" width="980px" height="600px"
        marginheight="0" marginwidth="0" frameborder="0"
        src="http://localhost:8080/projectName/gis.action?pageType='true'&pwd=<s:property value="shUserInfo.xwh" escape="true" />"></iframe>

    本域:
        /**
     /**
             * iframe自适应加载
             * */
            function reSetIframe(){
                var iframe = document.getElementById("dataLoad");
                iframe.height = 200;
                  try{
                      var bHeight = iframe.contentWindow.document.body.scrollHeight;
                      var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                      var height = Math.max(bHeight, dHeight);
                      iframe.height = height+40;
                  }catch (ex){}
            }

    跨域:



        中间jsp(agent.jsp同主iframe在相同目录下)
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
            <%
                String path = request.getContextPath();
            %>
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
                <script>
                    function pseth() {
                        var iObj = parent.parent.document.getElementById("dataLoad");//A和main同域,之所以可以访问节点
                        var iObjH = parent.frames["biframe"].location.href;//访问自个儿的location对象获取hash值
                        var bHeight = iObjH.split("?")[1];//操作dom
                        iObj.style.height = bHeight + "px";
            
                        parent.parent.document.getElementById("container_1000").style.height = (Number(bHeight) + 260)+ "px";
                    }
                    pseth();
                </script>
            </html>

            
        嵌套页面(iframe其他域下的jsp、action)
       
    <iframe id="biframe" name="biframe"  width="100%"  src="" style="display:none"></iframe>
        function sethash(){
                var b_height = document.getElementById("mtjy_con").scrollHeight;
                var b_iframe = document.getElementById("biframe");
                b_iframe.src =  "http://192.168.1.10:8080/projectName/agent.jsp?"+b_height;
            }
            window.οnlοad=sethash;


    展开全文
  • iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
  • 采用JavaScript来控制iframe元素的高度iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...
  • Iframe的强大功能偶就不多说...百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题。网上根本找不到一种可行
  • 采用JavaScript来控制iframe元素的高度iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要...
  • iframe高度需要根据子页面的实际高度来进行调整。如果iframe高度小于子页面的实际高度,超出的部分无法显示;相反,如果iframe高度过高,则页面上会出现大量的空白区域。我们可以通过属性或...
  • 今天在对接的时候,iframe引入第三方的页面的时候,本想获取页面高度再去设置ifrmae的高度。但是因为网站和iframe子页面的域名不一样,所以出现了跨域问题。不过好在第三方是合作关系,让他们配合调整了一下页面,...
  • 在我们的白社会里,需要嵌入第三方应用,而嵌入的方式是使用 iframe,为了页面美观,这里就有一个最简单的需求:iframe高度需要跟随其本身内容的变化而实时变化,这就要求主页面根据 iframe 的内容实时的去设置其...
  • 跨域iframe高度自适应的多种方法

    千次阅读 2016-04-25 21:42:15
    当 A页面中嵌入一个新页面B时,我们常常会使用 iframe来实现。...以下是跨域iframe 自适应高度的一些 demo:说明: - 以下 A 、B 和 C 分别代表 a.html 、b.html 和 c.html; - 以下例子均为 A 嵌入 B。
  • 计算页面的实际高度iframe自适应会用到  function calcPageHeight(doc) {  var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)  var sHeight = Math.max...
  • <html> <head> <style> body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;...iframe src='http://hi.baidu.com/' width='100%' height='100%' frameborder=.
  • 1. 跨子域的iframe高度自适应 2. 完全跨域iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,244
精华内容 897
热门标签
关键字:

iframe高度自适应跨域