设置跨域的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页面是第三方的页面,这也是没办法的,需要弄的

时间: 2024-10-15 10:49:28

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

跨域下iframe自适应高度

最近在做一个需求,需求大致背景:页面中iframe嵌入另一家公司的列表页 博主的第一反应就是“very easy!”,so,挽起双袖开始敲代码 结果出现问题了,iframe跨域,无法获得内嵌页面的高度,因此出现的上下滚动条,so难看! 于是上网找大神,皇天不负有心人啊,终于找到了,激动之情无以言表.... 故事背景交代完毕 /******************************华丽的分割线,哈哈****************************/ 大神的例子大致是这样的: 假设ww

跨域和非跨域 获取iframe页面高度的方法

跨域方法: 第一步,在主页面里插入代码://假设主域名是www.aaa.com  需要插入的跨域域名为www.bbb.com <iframe src="http://www.bbb.com/index.html" width="100%" height="100%" id="iframepage" name="iframepage" onLoad="iFrameHeight()"

跨域的iframe自动调整高度(cross-domain iframe resizer)

可以使用iframe-resizer项目地址: http://davidjbradshaw.github.io/iframe-resizer/演示地址: http://davidjbradshaw.com/iframe-resizer/example/ 用法:1.父页面: 引入jQuery.js 和 iframeResizer.min.js <script> jQuery(function($){ $('#js_iframe').iFrameResize(); }) </script&g

nodejs设置跨域访问

//设置跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods",&qu

本地跨域操作iframe的提示

Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. 不想说什么,知道跨域就可以了 本地跨域操作iframe的提示

跨域存取iframe

/// <summary> /// 跨域存取iframe /// </summary> /// /* HtmlDocument main_formDoc = webBrowser1.Document; IHTMLDocument2 main_mshtmlIHTMLDoc = (IHTMLDocument2)main_formDoc.DomDocument; Object frame_index = 1; IHTMLWindow2 target_mshtmlIHTMLWindow =

设置跨域cookie(www.jd.com,search.jd.com...这种的情况)

设置跨域cookie 原文地址:https://www.cnblogs.com/x54256/p/8671951.html

ASP.NET MVC中设置跨域

ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我们网站编程出现了问题.客户端(网页)和后台编程都可以有效解决这个问题.客户端可以通过JSONP来完成跨域访问:在ES6中为了解除同源策略问题,想出一个办法:当被请求网站为响应头respone添加了一个名为Access-Control-Allow-Origin的header,设置其值等于发起请求网站的

iview-cli 设置跨域代理服务器

1.打开 webpack.dev.config.js 2.//设置跨域代理 devServer: { historyApiFallback: true, hot: true, inline: true, stats: { colors: true }, proxy: { //匹配代理的url '/api': { // 目标服务器地址 target: localhost:8080', //路径重写 pathRewrite: {'^/api' : '/api'}, changeOrigin: tru