iframe自适应与跨域

来源：互联网发布：linux init.d不见了编辑：程序博客网时间：2024/06/10 00:23

非跨域iframe自适应

父页面iframe.jsp

<!doctype html><head>    <base id="base" href="${request.contextPath}/">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>ssh-index-page</title></head><body><!-- 搜索区域 --><!-- 搜索区域 --><div id="resultList" width="996px"><iframe id="iframe_test" src="juhuasuan/test.htm?ftl=iframeInner"></iframe></div><div class="footer"></div><!-- 内容区域/宝贝搜索结果 --><script src="${request.contextPath}/template/plugins/jQuery/jquery-1.12.3.min.js"></script><script src="${request.contextPath}/template/js/common.js"></script></body></html>

子页面iframeInner.jsp

<!doctype html><head>    <base id="base" href="${request.contextPath}/">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>ssh-index-page</title></head><body><!-- 搜索区域 --><!-- 搜索区域 --><div id="resultList" width="996px"><div class="advertising">    <img src="${request.contextPath}/template/images/ui/beauty.jpg"/></div></div><div class="footer"></div><!-- 内容区域/宝贝搜索结果 --><script src="${request.contextPath}/template/plugins/jQuery/jquery-1.12.3.min.js"></script><script src="${request.contextPath}/template/js/common_domain.js"></script></body></html>

显示结果：
这里写图片描述
如果内部的内容是静态的还好可以写死父页面中iframe的高度和宽度，但如果内部高度变化较大的话，就不好了弄了，在这里我们将内部页面(iframeInner.jsp)加上一段js
common_domain.js

function setArea(){    if (window.top != window.self) {        parent.document.getElementById('iframe_test').height = document.body.offsetHeight                + 40 + "px";        console.log(document.body.scrollHeight);        console.log(document.body.scrollWidth);        console.log(document.body.offsetHeight);        console.log(document.body.offsetWidth);        parent.document.getElementById('iframe_test').width = document.body.scrollWidth        + 40 + "px";    }}

子页面可以在body中调用

<body onload="setArea();">

显示结果
这里写图片描述
经过测试offsetWidth往往并不能获取准确的宽度，而scrollHeight往往会将上一次设置的height当作本次的页面高度，导致页面越来越高，没有offsetHeight准确；

iframe跨域自适应

通过设置domain

使用document.domain:这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
我们在192.168.1.63在布置一个web工程testIframe,父页面iframe.jsp

<!doctype html><head>    <base id="base" href="${request.contextPath}/">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>ssh-index-page</title></head><body><!-- 搜索区域 --><!-- 搜索区域 --><div id="resultList"><iframe id="iframe_test" src="http://192.168.1.44:9090/zhibi-shd/juhuasuan/test.htm?ftl=iframeInner"></iframe></div><div class="footer"></div></body></html>

页面调用结果：这里写图片描述
iframe自适应大小失败，这是浏览器安全限制的。现在我们利用document.domain设置，将两个工程设置在相同的基础域名下
在63的页面中加上document.domain=test.testIframe.com,并且将iframe的src换成域名访问

<iframe id="iframe_test" src="http://inner.test.testIframe.com:9090/zhibi-shd/juhuasuan/test.htm?ftl=iframeInner"></iframe>

同样在44的common_domain.js设置大小之前也就是setArea的开始处设置域名document.domain=test.testIframe.com

function setArea(){    if (window.top != window.self) {        document.domain="test.testIframe.com";        parent.document.getElementById('iframe_test').height = document.body.offsetHeight                + 40 + "px";        console.log(document.body.scrollHeight);        console.log(document.body.scrollWidth);        console.log(document.body.offsetHeight);        console.log(document.body.offsetWidth);        parent.document.getElementById('iframe_test').width = document.body.scrollWidth        + "px";    }}

当然为了解析域名，在你访问之前需要先配置一下本地文件，不然电脑不识别你自己设置的域名。win7找到C:\Windows\System32\drivers\etc 找到hosts文件，记事本打开，添加上
192.168.1.44 inner.test.testIframe.com
192.168.1.63 www.test.testIframe.com
192.168.1.63 test.testIframe.com
这样域名访问时，会转换成你设置的网址,访问结果
这里写图片描述

通过中转页面实现跨域

跨域问题的出现主要是浏览器限制不同域名之间的不能相互操作。但是如果是同一域名就可以了。为此我们作一中转页面transfer.jsp放在63上

<!DOCTYPE html><html><head><title>transfer.jsp</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="${pageContext.request.contextPath}/base/js/jquery-1.9.1.min.js" type="text/javascript"></script><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body></body><script type="text/javascript">    var b_iframe = window.parent.parent.document.getElementById("iframe_test");    var hash_url = window.location.hash;    if (hash_url.indexOf("#") >= 0) {        var hash_width = hash_url.split("#")[1].split("|")[0] + "px";        var hash_height = hash_url.split("#")[1].split("|")[1] + "px";        b_iframe.style.width = hash_width;        b_iframe.style.height = hash_height;    }</script></html></html>

将这个页面嵌到44的页面(iframeInner.jsp)中
iframeInner.jsp

<!doctype html><head>    <base id="base" href="${request.contextPath}/">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>ssh-index-page</title></head><body><!-- 搜索区域 --><!-- 搜索区域 --><div id="resultList" width="720px">    <img src="${request.contextPath}/template/images/ui/beauty.jpg"/></div><iframe src="" id="iframe_transfer"></iframe><div class="footer"></div><!-- 内容区域/宝贝搜索结果 --><script src="${request.contextPath}/template/plugins/jQuery/jquery-1.12.3.min.js"></script><script src="${request.contextPath}/template/js/common_domain.js"></script></body></html>

每次刷新的时候通过改变iframe_transfer的src传入宽度和高度
common_domain.js

function setArea1(){    if (window.top != window.self) {//      document.domain="test.testIframe.com";        var height = document.body.offsetHeight + 40;        console.log(document.body.scrollHeight);        console.log(document.body.scrollWidth);        console.log(document.body.offsetHeight);        console.log(document.body.offsetWidth);        var width = document.body.scrollWidth;        $("#iframe_transfer").attr("src","http://192.168.1.63:9090/sjmm/data/service_market_detail.htm?name=transfer#"+width+"|"+height);    }}setArea1();

63上的父页面iframe.jsp不做改变

<!doctype html><head>    <base id="base" href="${request.contextPath}/">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>ssh-index-page</title></head><body><!-- 搜索区域 --><!-- 搜索区域 --><div id="resultList"><iframe id="iframe_test" src="http://192.168.1.44:9090/zhibi-shd/juhuasuan/test.htm?ftl=iframeInner"></iframe></div><div class="footer"></div><!-- 内容区域/宝贝搜索结果 --></body></html>

因为中转页面transfer.jsp与父页面iframe.jsp同域名，所以可以相互操作，不算跨域。
显示结果：
这里写图片描述

0 0