Q:
在A项目的a页面嵌入一个iframe,
src是B项目的b页面,
怎样让a页面的高度跟b页面的高度一样?

A:
解决跨域方案:增加一个A项目的c页面。

操作步骤:

一,a页面的iframe设置: 获取到当前域名,作为参数设置到src上

 <iframe id={idname} title=" " scrolling="no" src={`${iframeUrl}?zeus=${locationOrigin}`} >

  

二,b页面页脚增加以下代码:
通过location拿到a页面的域名,请求A项目的c页面,并将b页面的宽度高度/宽度通过src传到c页面。

 <script type="text/javascript">
!(function (){
var search = window.location.search;
if(!search || search.indexOf('zeus') === -1)return;
var query = {};
search.slice(1).split('&').forEach(function(item){
var a = item.split('=');
query[a[0]] = a[1];
})
if(query.zeus){
var body = document.body;
var w = Math.max(body.scrollWidth, body.clientWidth);
var h = Math.max(body.scrollHeight, body.clientHeight);
var iframeNode = document.createElement('iframe');
iframeNode.style.display = 'none';
iframeNode.src = query.zeus + '/m/iframe/ware#' + w + '|' + h;
body.appendChild(iframeNode);
}
})();
</script>

三,c页面添加以下代码:
通过location拿到b页面的宽高,然后设置a页面的宽高,done!

 const setIframeWH = () => {
const outerWindow = window.parent.parent;
const locationPathname = outerWindow.location.pathname;
const idname = locationPathname.replace(/\//gi, '__');
let iframeMain = outerWindow.document.getElementById(idname);
let hash = window.location.hash;
if (iframeMain && hash.indexOf('#') >= 0) {
let [width, height] = hash.slice(1).split('|');
iframeMain.style.width = `${width}px`;
iframeMain.style.height = `${Number(height) + 50}px`;
}
}

iframe跨域动态设置主窗口宽高的更多相关文章

  1. Vue动态设置Dom元素宽高

    需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...

  2. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  3. 【Android疑难杂症】GridView动态设置Item的宽高导致第一个Item不响应或显示不正常的问题

    前言 这个问题在之前做一个盒子项目时遇到过,最近又遇到了,使用GridView遇到的非常奇葩的问题,这里记录分享一下. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnb ...

  4. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  6. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  7. iFrame跨域的方式

    4种通过iframe跨域与其他页面通信的方式 不同域下的iframe不能进行操作. 1.location.hash: 在url中,http://www.baidu.com#helloword的#hel ...

  8. iframe跨域访问

    js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决 ...

  9. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

随机推荐

  1. Java集合之Collection

    Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.* Java集合主要可以划分为4个部分:List列表.Set集 ...

  2. Google地球查看香港地形

    12月1号要去香港.为此需要先了解一下香港的情况.以前只知道用Google地球看别人照的照片(或者是全景照),这次无意间发现了它一个很强大的功能:立体的呈现一个地区的地形.对于像香港这样的多山地区来说 ...

  3. 【翻译】对于Ext JS 5,你准备好了吗?

    原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...

  4. EM实现

    以下是实验设计 设计一个一维的数据,14个数据,7个成一组,一个高斯分布,整体数据隐含了2个高斯分布. 系统最初给出第一个数属于z0的概率0.9,最后一个数属于在z1的概率0.9,其余数据不可判定. ...

  5. #一周五# VS2015 CTP6, TFS2015 CTP1更新,老衣的开发工具汇总,2015 MVP 社区巡讲

    又到周五,这一周博主我工作效率极高,每天更新博客一篇,<快速创建网站>系列已经进程大半了,希望这个系列能够对大家有所帮助.今天周五了,博主要休息一下,就给大家唠叨一下这段时间都发生了什么. ...

  6. iOSAPP启动效果复杂动画之抽丝剥茧

    一.前言 随着开发者的增多和时间的累积,AppStore已经有非常多的应用了,每年都有很多新的APP产生.但是我们手机上留存的应用有限,所以如何吸引用户,成为产品设计的一项重要内容.其中炫酷的动画效果 ...

  7. java数据类型易错点简单总结,欢迎大神前辈补充!谢谢

    数据类型那这边看似简单,花了我很长时间也就是才练到几成"功力"吧.还希望路过的大神在下面补充,菜鸟的我深受感谢! 首先看两个思考题 思考题1:请问下面这个有没有问题 double ...

  8. LeetCode之“散列表”:Single Number

    题目链接 题目要求: Given an array of integers, every element appears twice except for one. Find that single ...

  9. Android Widget小组件开发(一)——Android实现时钟Widget组件的步骤开发,这些知识也是必不可少的!

    Android Widget小组件开发(一)--Android实现时钟Widget组件的步骤开发,这些知识也是必不可少的! PS:学习自某网站(不打广告) 这个小组件相信大家都很熟悉吧,以前的墨迹天气 ...

  10. ubuntu12.04:jdk7:手动安装

    总的原则:将jdk-7u10-linux-x64.tar.gz压缩包解压至/usr/lib/jdk,设置jdk环境变量并将其修改为系统默认的jdk 将jdk-7u5-linux-x64.tar.gz拷 ...