iframe 跨域自适应高度

最新推荐文章于 2024-03-29 11:18:46 发布
最新推荐文章于 2024-03-29 11:18:46 发布
阅读量87 收藏
点赞数
分类专栏： js 文章标签： js ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cocofuyi/article/details/84530725
版权
1。引入的跨域文件content.html
内容：
<html>
<head>
<title>content</title>
<script type="text/javascript" src="http://www.king.com/demo/iframe.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
</body>
</html>
2。主页面main.html
<html>
<head>
<title>main</title>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://www.king.com/demo/content.html"></iframe>
</body>
</html>
3。跨域文件要引入的js文件iframe.js
window.onload = function() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://www.jinxin.com/demo/proxy.html?width=" + document.body.scrollWidth + "&" + "height=" + document.body.scrollHeight;
document.getElementsByTagName("body")[0].appendChild(iframe);
}
4。跨域用于代理的页面proxy.html
<html>
<head>
<title>proxy</title>
</head>
<body>
<script>
var query = location.search.substring(1).split("&");
for (var i = 0; i < query.length; i++) {
var param = query[i].split("=");
switch (param[0]) {
case "width":
parent.parent.document.getElementById("content").width = param[1];
break;
case "height":
parent.parent.document.getElementById("content").height = param[1];
break;
}
}
</script>
</body>
</html>
cocofuyi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Iframe跨域自适应高度
09-10
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
IFrame跨域高度自适应实现代码
09-05
本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先，我们需要了解什么是跨域。在Web安全策略中，浏览器执行同源策略，这意味着一个网页只能访问与之同源（协议、域名、端口相同）的IFrame内容。但当...
iframe跨域自适应高度
weixin_40667880的博客
04-27 440
iframe加载第三方链接url时需要自适应高度 解决方法：iframe的高度样式单位使用vh（视区高度），方法如下： <iframe style="height: 100vh"></iframe> 如有问题，欢迎给我留言，一起探讨iframe自适应高度的问题。 ...
Iframe跨域 自适应高度
01-14 81
一：背景： 现在有在www.a.com域下的main.html,要在其内引入www.b.com下的b.html页面 二：思路: 现有主界面main在域a下，被嵌套页面b在域b下，被嵌套页面b又嵌套一个在域a下的中介页面c。当用户打开浏览器访问mail.html的时候载入b，触发b的onload事件获取其自身高度，然后b载入c并将高度值作为参数赋值给c的loc...
跨域引入iframe高度自适应
weixin_44215595的博客
10-23 288
今天在对接的时候，iframe引入第三方的页面的时候，本想获取页面高度再去设置ifrmae的高度。但是因为网站和iframe子页面的域名不一样，所以出现了跨域问题。不过好在第三方是合作关系，让他们配合调整了一下页面，我们这里也改了一下，很容易也就解决了。 问题： 引入iframe页面的时候，母页面与子页面的域名不一样，出现跨域 解决前提： 能有权限修改两边的页面。 解决方法： 使用 HTML5 p...
html5嵌套跨域页面 高度自适应,iframe跨域 自适应高度
weixin_33431252的博客
06-10 204
跨域问题是由于javascript语言安全限制中的同源策略造成的。出于安全方面的考虑，不允许跨域调用其他页面的对象。例如：a域名下，www.a.com/index.html需要引用b域名下，www.b.com/quote.html页面，但引用的这个b域名下页面里面内容高度不确定。此时就需要双方技术共同解决，利用iframe和location.hash方法。在a域名下，添加一个判断页agent.ht...
iframe 跨域高度自适应
Lucky050866的博客
03-28 1000
这个iframe的问题，在工作中简直就是突然的一到坎，打的戳不及防。通常很久遇到一次，每次遇到就忘记了上一次是如何解决的，emmmm…今天本仙女去总结一下。 在实际应用中，很多时候通iframe引入页面，如果同域情况，可以使用以下代码。 script: window.function(){ var ifm= document.getElementById(“iframepage”); var su...
跨域iframe的高度自适应
CHCH998的博客
09-22 250
1. 跨子域的iframe高度自适应 2. 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档
iframe 跨域自适应高度的解决方案
kaosini的专栏
05-20 881
项目中需要使用iframe嵌套另外一个项目的子页面,但是要求不能有滚动条,也就是说iframe的高度得根据嵌套页面的高度自适应   由于跨域,所以父子页面显然是不能通信的   第一个想到的是最近才接触到的window.name方式   代码片段:   [javascript] view plaincopy
vue跨域iframe自适应高度
qq_39352780的博客
03-29 641
项目使用iframe引入百度页面，要做iframe自适应宽高。
Iframe 跨域高度自适应
時雨的博客
07-10 443
一开始想直接在iframe加载完成后读取子页面的doc中body的高度，结果发现有跨域问题，无法获得子页面的具体信息，后面在网上寻找各种解决方案，有很多是没有用的，甚至直接没考虑跨域的，最后找到一种方便而且使用的方法：子页面发送消息给父页面，父页面监听消息。父页面存在一个iframe标签加载https://moments.shiyu.dev/friends 这个子页面，而且父子页面不在同一个域上，所以父页面在加载完成iframe后创建事件监听，监听子页面发来的消息(高度)。
iframe跨域自适应高度模板
02-16
总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...
js实现iframe自动自适应高度的方法
10-24
本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先，理解基本概念。Iframe的`height`属性决定了其显示区域的高度，当我们想要Iframe内容自适应时，我们需要动态地修改这个属性值，使其等于...
iframe跨域嵌套自适应高度
10-13
### iframe跨域嵌套自适应高度 在网页开发过程中，`iframe`作为一种常见的网页元素，被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而，在实际应用中经常会遇到一些问题，如跨域限制、自适应高度调整以及...
原创二胡音色源文件，可以让热爱电子乐喜欢做MIDI音乐的朋友，做参考音源
08-14
原创二胡音色源文件，可以让热爱电子乐喜欢做MIDI音乐的朋友，做参考音源。这里开源给大家，希望能帮助到您
基于Android人脸识别设计与实现.docx
最新发布
08-14
基于Android人脸识别设计与实现.docx
长虹大清快系列空调电路原理图 (2).rar
08-14
长虹大清快系列空调电路原理图 (2)
课程设计项目，利用阴影图的思想实现三维可视域分析+高分项目+源码.zip
08-14
课程设计项目，利用阴影图的思想实现三维可视域分析+高分项目+源码.zip 个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导
iframe跨域高度自适应
08-25
为了实现iframe的跨域高度自适应，你可以使用以下步骤： 1. 在父页面中，先获取到子页面的高度。可以通过子页面中的某个元素或者API来获取子页面的高度信息。 2. 使用window.postMessage方法将子页面的高度发送给父页面。在子页面中，需要监听message事件，并将子页面的高度发送给父页面。 在父页面中，添加以下代码： ```javascript // 监听来自子页面的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的子页面 if (e.origin !== '子页面的域名或URL') { return; } // 获取子页面传递过来的高度 var height = parseInt(e.data); // 设置iframe的高度 document.getElementById('yourIframeId').style.height = height + 'px'; }); ``` 在子页面中，添加以下代码： ```javascript // 获取子页面的高度 function getHeight() { var height = document.body.offsetHeight; // 将高度信息发送给父页面 window.parent.postMessage(height, '父页面的域名或URL'); } // 监听父页面传递过来的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的父页面 if (e.origin !== '父页面的域名或URL') { return; } // 获取父页面传递过来的高度 var height = parseInt(e.data); // 设置子页面的高度 document.body.style.height = height + 'px'; }); // 在页面加载完成后获取页面高度并发送给父页面 window.onload = function() { getHeight(); }; ``` 在上述代码中，你需要替换`子页面的域名或URL`和`父页面的域名或URL`为你实际使用的域名或URL。`yourIframeId`需要替换为你iframe元素的ID。 通过这种方式，子页面可以将自身的高度信息发送给父页面，父页面则可以根据接收到的高度信息来动态调整iframe的高度，实现跨域高度自适应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值