iframe跨域动态设置主窗口宽高
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跨域动态设置主窗口宽高的更多相关文章
- Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...
- android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- 【Android疑难杂症】GridView动态设置Item的宽高导致第一个Item不响应或显示不正常的问题
前言 这个问题在之前做一个盒子项目时遇到过,最近又遇到了,使用GridView遇到的非常奇葩的问题,这里记录分享一下. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnb ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- iFrame跨域的方式
4种通过iframe跨域与其他页面通信的方式 不同域下的iframe不能进行操作. 1.location.hash: 在url中,http://www.baidu.com#helloword的#hel ...
- iframe跨域访问
js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决 ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
随机推荐
- crontab 任务程序执行乱码的问题
今天碰到一个坑爹的问题,定时用php程序从远程的mssql读取数据,并写入到mysql中,手动用php执行程序的时候,程序运行没有问题,但当用crontab任务定时执行php程序的时候就出问题了,插入 ...
- Android群英传笔记——第十章:Android性能优化
Android群英传笔记--第十章:Android性能优化 随着Android应用增多,功能越来越复杂,布局也越来越丰富了,而这些也成为了阻碍一个应用流畅运行,因此,对复杂的功能进行性能优化是创造高质 ...
- DigitalClock的替代者TextClock
DigitalClock在API 17(Android4.2)中就被官方定义为过时的方法,很奇怪为什么现在很多的网上的帖子都介绍DigitalClock方法的使用(已经过时),如果你想让自己的应用在高 ...
- 【面试笔试算法】Problem 1 : DP滑雪问题--网易互联网算法实习生2017笔试题
Description Michael喜欢滑雪百这并不奇怪,因为滑雪的确很刺激.可是 为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...
- 【Visual C++】游戏编程学习笔记之一:五毛钱特效之透明和半透明处理
本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44163799 作者:ZeeCod ...
- 网站开发进阶(六)JSP两种声明变量的区别
JSP两种声明变量的区别 在JSP中用两种声明变量的方法,一种是在<%! %>内,一种是在<% %>内.他们之间有什么区别呢?我们直接看一个JSP文件来理解. 代码如下: &l ...
- 在SD/MMC卡上实现hive (Implement WinCE HIVE&ROM system on NAND or SD system )
本是个很简单的topic,但无奈的是很多客户都没有实现.所以只能写一个guide给客户,让他们依葫芦画瓢. 在SD卡上实现hive以及实现binfs最精髓的思想是,在boot stage 1依次加载s ...
- box-sizing属性(指定针对元素的宽度与高度的计算方法)
在css中,使用width属性与height属性来指定元素的宽度与高度.使用box-sizing属性,可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内部补白区域与边框 ...
- IT咨询顾问:一次吐血的项目救火
年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登录,对方技术人员一头雾水不知道什么原因 ...
- java并发包分析之———ConcurrentSkipListMap
一.前言 concurrentHashMap与ConcurrentSkipListMap性能测试 在4线程1.6万数据的条件下,ConcurrentHashMap 存取速度是ConcurrentSki ...