`
jinyanhui2008
  • 浏览: 319532 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

跨域情况下自适应大小的iframe

阅读更多

为了测试的方便,最好先设定host域名映射:

127.0.0.1 a.foo.com
127.0.0.1 b.foo.com
127.0.0.1 www.foo.com
127.0.0.1 www.bar.com

如果根域名相同,仅仅是子域名不同,则只要设定document.domain为根域名即可:

http://a.foo.com/main.html:

<html>
<head>
<title>main</title>
<script>
document.domain = "foo.com";
</script>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://b.foo.com/content.html"></iframe>
</body>
</html>

http://b.foo.com/content.html:

<html>
<head>
<title>content</title>
<script>
document.domain = "foo.com";
window.onload = function() {
parent.document.getElementById("content").width = document.body.scrollWidth;
parent.document.getElementById("content").height = document.body.scrollHeight;
}
</script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>

此时,浏览http://a.foo.com/main.html就能看到自适应大小的iframe效果了。

如果根域名不同,则需要通过代理页面的location.href传递变量:

http://www.foo.com/main.html:
 

<html>
<head>
<title>main</title>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://www.bar.com/content.html"></iframe>
</body>
</html>

http://www.bar.com/content.html:

<html>
<head>
<title>content</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script type="text/javascript" src="http://www.bar.com/iframe.js"></script>
</body>
</html>

http://www.foo.com/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>

http://www.bar.com/iframe.js:

window.onload = function() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://www.foo.com/proxy.html?width=" + document.body.scrollWidth + "&" + "height=" + document.body.scrollHeight;
document.getElementsByTagName("body")[0].appendChild(iframe);
}

此时,浏览http://www.foo.com/main.html就能看到自适应大小的iframe效果了,其原理是因为子页面content.html把大小通过location.href的方式设定到代理页面proxy.html上面,而代理页面proxy.html和原页面main.html处在同一域名下,所以不存在javascript的跨域安全限制。需要注意的是,代理页面proxy.html的引入使用的是javascript脚本动态生成的方式。网上很多例子里在引入代理页面时,是采用的html硬编码iframe的方式,然后用javascript设定src,这样的方式是不好的,在firefox下,会让代理页面proxy.html加载两次。

分享到:
评论

相关推荐

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    Iframe跨域自适应高度

    可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了

    iframe跨域高度自适应例子源码

    标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源...

    iframe跨域嵌套自适应高度

    本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整,并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**: - **`iframe`**:`iframe`即...

    iframe 跨域 自动适应高度

    当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,我们可以使用以下几种方法: - **CORS(Cross-Origin Resource Sharing)** 设置响应头`Access-Control-Allow-...

    js跨域问题之跨域iframe自适应大小实现代码

    这种情况下,要想实现跨域iframe大小的自适应,需要采用一些特殊的策略。 解决方案的思路可以分解为以下步骤: 1. 假设有一个页面a.htm属于域A,它通过iframe嵌入了域B下的页面b.html。由于b.html的尺寸可能会变化...

    iframe跨域自适应高度模板

    总结来说,`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制,通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见,能帮助我们更灵活地整合...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    2. 同源策略:由于跨域安全限制,只有同源的`iframe`才能访问其内容的高度,否则会出现安全错误。 3. 延迟加载:为了提高页面加载速度,可以考虑使用懒加载策略,即在`iframe`内容真正需要显示时再进行加载和高度...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    此外,由于跨域安全限制,`&lt;iframe&gt;`内页面与父页面可能无法进行通信,这会影响高度自适应功能的实现。确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过...

    解决iframe跨域高度自适应问题的源码

    本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先,我们需要理解为什么会出现跨域问题。根据浏览器的同源策略,一个网页只能访问与之同源(即协议、域名和端口完全相同)的资源。而跨域则意味着iframe...

    利用location.hash实现跨域iframe自适应

    www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....

    iframe根据页面内容自适应高度和宽度

    然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸时,可能会出现滚动条或者内容被截断的情况。为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细...

    IFrame跨域高度自适应实现代码

    但当IFrame加载的页面与包含它的页面不在同一域时,就会出现跨域情况,此时默认情况下无法直接获取或修改IFrame的内部信息,包括高度。 针对跨域IFrame高度自适应的问题,通常有两种方法: 1. 使用`postMessage` ...

    IFRAME自适应

    "IFRAME自适应"是针对不同设备和屏幕尺寸,确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中,IFRAME自适应尤其重要,因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...

    如何设置iframe高度自适应在跨域情况下的可用方法

    然而,当涉及到iframe的高度自适应时,如果子页面与父页面不在同一个域名下,就会出现JavaScript跨域问题,导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略,以下是一些常用的方法: 1. **...

    iframe自适应高度(DOM动态操作)

    - **跨域限制**:当`iframe`加载的内容与主页面不在同一域名下时,由于同源策略的限制,可能会出现安全问题,导致无法访问`iframe`内部的内容。 - **性能考虑**:频繁地调用`reinitIframe`函数会增加页面的负担,...

    iframe自适应子页面内容高度

    在同源情况下,可以使用以下JavaScript代码动态调整`iframe`高度: ```javascript function resizeIframe(iframeId) { var iframe = document.getElementById(iframeId); if (iframe && iframe.contentWindow && ...

Global site tag (gtag.js) - Google Analytics