iframe自适应、iframe跨域自适应

最新推荐文章于 2026-05-13 15:31:53 发布

原创最新推荐文章于 2026-05-13 15:31:53 发布 · 648 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

iframe自适应

本文介绍了一种使IFrame实现自适应高度的方法，并提供了处理不同域名间IFrame内容高度调整的技术方案。通过使用JavaScript，实现了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.onload=sethash;

标签

#iframe自适应 #iframe跨域