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. hive发杂数据结构的使用,struct,array,map

    一个简单介绍http://jimi68.iteye.com/blog/980573 一般的复杂介绍:http://songpo-ath-taobao-com.iteye.com/blog/140513 ...

  2. python的安装,IDLE基本操作

    §一.安装Python 1. 下载Active Python安装包 根据你机器型号download Python,32b选择for windows X86,64b选择for window 64b 2. ...

  3. 使用IO映射的方式获取tiny4412板子上的ID号

    在以前的文章中,有一篇 基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号 在那篇文章中,具体可以参考.那时候我使用了简单的字符设备驱动框架,最终的ID号通过read方法可将 ...

  4. android的ndk开发简介-android学习之旅(93)

    环境搭建 1.安装ndk 2.安装cygwin (android是基于linux的Framework,运行的本地库是.SO,而不是.dll库,大部分都实在windows下开发,如果是linux就没这个 ...

  5. SharePoint 列表项通过自定义WebService读取

    简述:给其他系统提供集成,发现SharePoint自带的WebService各种不好使,索性就自己写一点,也当做自己学习的记录了.当然内容比较简单,希望大侠们不要介意,也不要骂我啊.好了,进入正题吧. ...

  6. netlink组播的使用

    Linux的netlink机制是非常好的Linux内核与应用层进行双向交互数据的方式.其常用的单播方式可以实现内核为服务端,应用层为客户端的通信方式.如果需要实现应用层为服务端,内核为客户端的通信方式 ...

  7. 数据准备<2>:数据质量检查-实战篇

    上一篇文章:<数据质量检查-理论篇>主要介绍了数据质量检查的基本思路与方法,本文作为补充,从Python实战角度,提供具体的实现方法. 承接上文,仍然从重复值检查.缺失值检查.数据倾斜问题 ...

  8. python MultiProcessing标准库使用Queue通信的注意要点

    今天原本想研究下MultiProcessing标准库下的进程间通信,根据 MultiProcessing官网 给的提示,有两种方法能够来实现进程间的通信,分别是pipe和queue.因为看queue顺 ...

  9. html5中的全局属性

    在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...

  10. svn 不能添加.a文件

    1.打开终端输入    open ~/.subversion/ 2.双击打开config文件 3.修改如下两行 # global-ignores = *.o *.lo *.la *.al .libs ...