前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题
刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码
<body onload="javascript: setHeight();">
<script>
function setHeight(){
var dHeight = document.documentElement.scrollHeight;
var t = document.createElement("div");
t.innerHTML = '<iframe id="kxiframeagent"
src="http://xxxx.kaixin001.com/xxx/xxx.html#'+dHeight+'"
scrolling="yes" height="0px" width="0px"></iframe>';
document.documentElement.appendChild(t.firstChild);
}
</script>
我想着跨域如何解决啊!后来去网上搜索了一下子 恍然大悟
具体如下 我是复制过来了 大家重点理解一下子它的实现思路 ：
iframe跨域自适应
问题:
A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要 a.htm中的iframe自适应大小.
问题本质 :
js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不到b.html的大小.
解决方案:
首先前提是A，B是合作关系,b.html中能引入A提供的js
首先a.html中通过iframe引入了b.html
Html代码
1
.
<
iframe id
=
"
aIframe
"
height
=
"
0
"
width
=
"
0
"
2
. src
=
"
http://www.b.com/html/b.html
"
frameborder
=
"
no
"
border
=
"
0px
"
marginwidth
=
"
0
"
3
. marginheight
=
"
0
"
scrolling
=
"
no
"
allowtransparency
=
"
yes
"
><
/
iframe>
<
iframe id
=
"
aIframe
"
height
=
"
0
"
width
=
"
0
"
src
=
"
http://www.b.com/html/b.html
"
frameborder
=
"
no
"
border
=
"
0px
"
marginwidth
=
"
0
"
marginheight
=
"
0
"
scrolling
=
"
no
"
allowtransparency
=
"
yes
"
><
/
iframe>
B在b.html中引入了A提供的js文件
Html代码
1
.
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
src
=
"
http://www.a.com/js/a.js
"
><
/
script>
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
src
=
"
http://www.a.com/js/a.js
"
><
/
script>
该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和高设置到src的hash里面
Html代码
1
.
<
iframe id
=
"
iframeProxy
"
height
=
"
0
"
width
=
"
0
"
src
=
"
http://www.a.com/html/a_proxy.html#width|height
"
style
=
"
display:none
"
><
/
iframe>
<
iframe id
=
"
iframeProxy
"
height
=
"
0
"
width
=
"
0
"
src
=
"
http://www.a.com/html/a_proxy.html#width|height
"
style
=
"
display:none
"
><
/
iframe>
a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽和高.
Js代码
1
.
var
pParentFrame
=
parent.parent.document.getElementById(
"
aIframe
"
);
2
.
var
locationUrlHash
=
3
. parent.parent.frames[
"
aIframe
"
].frames[
"
iframeProxy
"
].location.hash;
4
. pParentFrame.style.width
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
0
]
+
"
px
"
;
5
. pParentFrame.style.height
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
1
]
+
"
px
"
;
var
pParentFrame
=
parent.parent.document.getElementById(
"
aIframe
"
);
var
locationUrlHash
=
parent.parent.frames[
"
aIframe
"
].frames[
"
iframeProxy
"
].location.hash;
pParentFrame.style.width
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
0
]
+
"
px
"
;
pParentFrame.style.height
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
1
]
+
"
px
"
;
这样的话a.html中的iframe就自适应为b.html的宽和高了.
分享到：
相关推荐
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
以上步骤和代码片段展示了跨域iframe自适应大小问题的基本解决方法。需要注意的是，这个方法需要域A和域B之间有较好的合作关系，因为需要在b.html中引入域A的脚本。此外，为了确保跨浏览器兼容性，可能还需要对不同...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
总的来说，通过使用JavaScript动态计算`<iframe>`内容的高度并设置`<iframe>`的高度，可以有效地解决`<iframe>`内容高度自适应以及设置高度后无法缩小的问题。同时，要注意兼容性问题和跨域限制，以确保在各种环境下...
这就需要我们找到一种方式来解决`iframe`跨域的高度自适应问题。 标题"iframe跨域高度自适应例子源码"指的是一个实例，展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个...
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
【标题】：“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中，iframe（Inline Frame）是一种内联框架，常用于在同一个HTML文档中嵌入...
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
本模板将介绍如何处理`iframe`的跨域和自适应高度这两个关键问题。 首先，让我们了解`iframe`跨域。由于同源策略，`iframe`默认无法访问或操作不同源的页面内容，包括获取页面高度、读取内容等。为了解决这个问题，...
"再谈iframe自适应高度"这个主题，关注的是如何使iframe的内容区域根据所加载页面的高度自动调整，以避免滚动条出现或者内容被截断的问题。在网页设计中，尤其是在构建响应式布局时，这是一个非常关键的优化点。 1....
本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整，并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**： - **`iframe`**：`iframe`即...
"IFRAME自适应"是针对不同设备和屏幕尺寸，确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中，IFRAME自适应尤其重要，因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段，它可能包含了针对不同浏览器的兼容性处理，比如对于IE6-9这些老版本浏览器的特殊处理，因为它们对某些DOM操作和事件处理的支持...
页面域关系： 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.
### iframe自适应高度实现方法详解 在网页设计与开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前文档中嵌入另一个HTML文档。然而，在实际应用过程中，经常会遇到`iframe`内容高度固定导致页面...
为了解决这个问题，我们需要实现一个自适应高度的`iframe`，使其能根据内部内容自动调整高度。本文将深入讲解如何通过JavaScript来实现这一功能。 首先，让我们理解`iframe`的基本用法。在HTML中，创建一个`iframe`...
在网页设计中，`iframe`（Inline Frame）是一种嵌入其他网页或内容的标签，它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档，你可以得到更详细的步骤和解释，以便更好地理解和应用这些技术。
3. **第三方库**：对于更复杂的需求，如跨域`iframe`的高度自适应，可以使用第三方库，如`iframe-resizer`。`iframe-resizer`库提供了一种解决方案，它允许父页面和子页面之间进行通信，动态调整`iframe`的高度。...