iframe自适应与跨域

最新推荐文章于 2025-02-27 11:16:51 发布
最新推荐文章于 2025-02-27 11:16:51 发布
阅读量1.1k 收藏
点赞数
分类专栏： javascript 文章标签： ifram自适应 iframe跨域 iframe域名 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chuyoule/article/details/51707221
版权

非跨域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同域名，所以可以相互操作，不算跨域。
显示结果：
这里写图片描述

完美解决跨域iframe的高度自适应
05-25
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
利用location.hash实现跨域iframe自适应
12-10
www.baidu.com,假设地址：http://www.baidu.com/b.html 实现效果： A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
iframe 自适应高度
weixin_33979203的博客
06-04 100
// JScript 文件//var iframeids=["test_iframeid"] var iframehide="yes" function dyniframesize()  {  var dyniframe=new Array()  for (i=0; i&lt;iframeids.length; i++)  {   if (document.getElementById)   { ...
【记录】iframe跨域通信
最新发布
暗影的博客
02-27 246
【代码】【记录】iframe跨域通信。
iframe自适应、iframe跨域自适应
hou604720966的专栏
12-06 599
iframe自适应与iframe跨域自适应
iframe 的自适应高度
ξσ Dicky's Blog σξ
02-26 2307
实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。源代码如下//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的I
完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
ccaicainiao的博客
04-28 1819
这是一种比较简单比较容易实现的方法，只需要设置css样式就可以实现。是我在nebear的博客里面看到的，原文： 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】&lt;html&gt; &lt;head&gt; &lt;style&gt; body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margi...
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
然而，当涉及到iframe的高度自适应时，如果子页面与父页面不在同一个域名下，就会出现JavaScript跨域问题，导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略，以下是一些常用的方法： 1. **...
js跨域问题之跨域iframe自适应大小实现代码
10-29
以上步骤和代码片段展示了跨域iframe自适应大小问题的基本解决方法。需要注意的是，这个方法需要域A和域B之间有较好的合作关系，因为需要在b.html中引入域A的脚本。此外，为了确保跨浏览器兼容性，可能还需要对不同...
iframe自适应宽高
11-08
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe自适应
qq_37843397的博客
06-20 220
iframe自适应：1.width:100%;height:100%2.所有的父级标签100%，包括html和body
iframe高度自适应
01-04
根据iframe内容高度自适应。不能确保所有的地方都能通用，但是大部分地方都能适用。
iframe跨域常用问题和iframe页面自适应
08-20
这是关于iframe使用过程中出现的问题整理的解决方法，关于使用iframe不用单独写接口打通数据，直接把数据通过ifarme嵌套方法传递过去，使用简单方便。
iframe 自适应
创世元年
04-28 812
1.   2.3.$(function(){   4.    $("#c-c-iframe").load(function(){          5.        $(this).height($(this).contents().find("#content").height() + 40);   6.    });   7.       8.});   9.-->   10. 1.个人
CSS完美实现iframe高度自适应（支持跨域）
qq_34293842的博客
08-14 1279
&lt;html&gt; &lt;head&gt; &lt;style&gt; body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;iframe src='" htt
iframe设置自适应高度
yangnaiyi
07-11 106
function SetCwinHeight(){ var iframeid=document.getElementById("iframeid"); //iframe id if (document.getElementById){ if (iframeid && !window.opera){ if (iframeid.contentDo...
vue iframe自适应高度跨域问题
06-12
Vue中使用iframe实现内容嵌套时，有时会遇到跨域和自适应高度的问题。这是因为浏览器出于安全原因，不允许从一个源（域名）加载另一个源的内容，除非服务器提供了适当的CORS（跨源资源共享）策略。对于跨域问题，你需要在服务器端设置允许跨域请求，或者在前端使用JSONP或者代理服务器来间接访问。 至于iframe的高度自适应，Vue本身并不能直接处理iframe的高度变化，因为它是在DOM渲染后处理数据的。但你可以通过以下方法解决： 1. 利用JavaScript事件监听：给iframe添加`load`或`message`事件，在事件触发时获取iframe的实际高度并更新其CSS样式。 ```javascript new Vue({ el: '#myIframe', methods: { updateIframeHeight() { this.$refs.myIframe.addEventListener('load', () => { this.$refs.myIframe.style.height = `${this.myIframeContentHeight}px`; }); } }, mounted() { this.updateIframeHeight(); } }) ``` 2. 使用Intersection Observer API：这是一个现代浏览器提供的API，可以检测元素是否进入或离开视口，适用于动态内容。你可以创建一个观察者，当iframe进入视口时计算其高度。 ```javascript const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.myIframeContentHeight = entry.target.contentDocument.body.scrollHeight; } }); }); observer.observe(this.$refs.myIframe); ``` 3. 使用第三方库如`vue-observe-visibility-events`：这个库可以帮助你在元素可见时执行回调，可以配合上述方法使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值