设置跨域的iframe的高度

原因

如下图,A域中有个B域的页面,但是B的页面的长度不确定,A无法去设置一个准确的高度。

PS:iframe高度设置auto是无效的

解决办法

 

如上图,

(1)在B页面中加一个A的代理页面的iframe

        PS:这最里面的A页面能调用最外层A页面的方法,而B页面是调用不了最外层A的(因为跨域的安全限制)。

(2)当B页面加载完成时,修改A的agent.html所在iframe里src。

setTimeout(function(){
    var _height =  $("#vs-source").height();
    var b_iframe = document.getElementById("crossdomain_agent_iframe");  //agent.html的iframe的id 

    if( b_iframe ){

        var src = b_iframe.src.split("#")[0] ;
        src = src.split("?")[0] ;
        b_iframe.src =src+"?"+new Date().getTime()+"#"+(b_height+(_height-1000));
    }
},200) ;

(3)agent.html代码调用最外层A页面代码设置B页面高度

agent.html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>frame agent</title></head>
<body>
<script type="text/javascript">
function  pseth() {
   var win = parent.parent ;
    var hashHeight = window.location.hash;
    var tabId = win.$(".ui-tabs-selected:last").find("a").attr("tabid");
    var iframe = win.$("#"+tabId).find("iframe")[0] ;
    win._setIFrameHeight && win._setIFrameHeight(iframe,hashHeight.split("#")[1]) ;
}
pseth();
</script>
</body>
</html>

 弊端

1.B页面需要做修改,加一个iframe和主动设置一次。

   PS:很多时候B页面是第三方的页面,这也是没办法的,需要弄的

转载:http://www.cnblogs.com/lovesong/p/3989298.html

时间: 2024-12-01 19:29:31

设置跨域的iframe的高度的相关文章

跨域实现iframe 高度自动适应

问题描述 如何用C#获得跨域实现iframe高度自动适应,如:<iframesrc='http://www.163.com'.....></iframe>也就是说,如何把163网页用iframe嵌套,其iframe高度自动适应,不要出现滚动条,请高手,指教!!! 解决方案 解决方案二:顶下解决方案三:不设置滚动条就是啦解决方案四:<iframeid="iframeshowlist"name="iframeshowlist"src=&qu

如何用C#获得 跨域实现iframe高度自动适应

问题描述 如何用C#获得跨域实现iframe高度自动适应,如:<iframesrc='http://www.163.com'.....></iframe>也就是说,如何把163网页用iframe嵌套,其iframe高度自动适应,不要出现滚动条,请高手,指教!!! 解决方案 解决方案二:用js脚本引用,试试看解决方案三:up解决方案四:up

JS未跨域操作iframe里的DOM_javascript技巧

这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴下index.html和iframe引入的a.html内容. index-> <div class="d1"> <iframe src="a.html" frameborder="0" name="one"

如何用javascript 跨域获取iframe子页面的元素信息?

问题描述 RT,如何用javascript 跨域获取iframe子页面的元素信息?比如我在我的parent.jsp里面,用iframe引入了www.baidu.com作为子页面,那我如何在parent.jsp里面获得百度中,元素名字为test的div指定属性信息?能不能修改?另外,如果通过创建chrome扩展程序的方式,能不能在程序里面获得作用页面中的元素数据? 解决方案 跨域的话想用父页面的js获取iframe里的元素是不可能的.用chrome扩展程序的话是可以的.解决方案二:你的问题这里有答

跨域访问-iframe之间通信

在项目中,经常会使用到 iframe,把其它域名的内容嵌入到页面中,这对于我们来说是个很方便的方法,但是,有时候,无可避免需要多个iframe间或者iframe与主页面之间进行通信,比如交换数据或者触发一系列事件. 本文将重点介绍如何在跨域的情况下进行iframe通信.首先,我们了解一下在同域情况下,iframe的通信方法. frame同域通信 假设,www.a.com域的main.jsp需要与子页面sub_1.jsp的互相访问,实现的功能如下: (1)main.jsp通过iframe加载sub

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

复制代码 代码如下: var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; var iframehide = "yes"; function dynIframeSize(){ var dyniframe = []; for(var i=0;i<iframeids.length;i++){ if(!document.getElementById) return false

跨域iframe的高度自适应

原文:跨域iframe的高度自适应   跨子域的iframe高度自适应 完全跨域的iframe高度自适应   同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度.   但跨域的情况则不允许对子页面或父页面的文档进行访问(返回undefined),所以我们要做的就是打通或间

Iframe高度自适应(兼容IEFirefox、同域跨域)

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便.于是自动调整iframe的高度就成为本文的重点. 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 同域时Iframe高度自适

JavaScript实现iframe自动高度调整和不同主域名跨域_javascript技巧

 大家都知道Js有同源策略,就是主域名不同嵌套的iframe不允许Js通信的. 比如我有一个网站,网站中要嵌入其网站的页面.那么我可以使用iframe引用第三方网站的地址即可. 但是问题也来的iframe的高度是固定的不能与第三方网站很好的融合,又例如第三方网站使用了瀑布流插件,要滚动加载自动计算高度,那么先说跨域:iframe主域名不同跨域方法,假如网站 A.com  B.com   A 里面放入一个iframe 引用了B.com,这种情况下B.com里面的Js是无法访问到A.com的.JS跨