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 ...
随机推荐
- hive发杂数据结构的使用,struct,array,map
一个简单介绍http://jimi68.iteye.com/blog/980573 一般的复杂介绍:http://songpo-ath-taobao-com.iteye.com/blog/140513 ...
- python的安装,IDLE基本操作
§一.安装Python 1. 下载Active Python安装包 根据你机器型号download Python,32b选择for windows X86,64b选择for window 64b 2. ...
- 使用IO映射的方式获取tiny4412板子上的ID号
在以前的文章中,有一篇 基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号 在那篇文章中,具体可以参考.那时候我使用了简单的字符设备驱动框架,最终的ID号通过read方法可将 ...
- android的ndk开发简介-android学习之旅(93)
环境搭建 1.安装ndk 2.安装cygwin (android是基于linux的Framework,运行的本地库是.SO,而不是.dll库,大部分都实在windows下开发,如果是linux就没这个 ...
- SharePoint 列表项通过自定义WebService读取
简述:给其他系统提供集成,发现SharePoint自带的WebService各种不好使,索性就自己写一点,也当做自己学习的记录了.当然内容比较简单,希望大侠们不要介意,也不要骂我啊.好了,进入正题吧. ...
- netlink组播的使用
Linux的netlink机制是非常好的Linux内核与应用层进行双向交互数据的方式.其常用的单播方式可以实现内核为服务端,应用层为客户端的通信方式.如果需要实现应用层为服务端,内核为客户端的通信方式 ...
- 数据准备<2>:数据质量检查-实战篇
上一篇文章:<数据质量检查-理论篇>主要介绍了数据质量检查的基本思路与方法,本文作为补充,从Python实战角度,提供具体的实现方法. 承接上文,仍然从重复值检查.缺失值检查.数据倾斜问题 ...
- python MultiProcessing标准库使用Queue通信的注意要点
今天原本想研究下MultiProcessing标准库下的进程间通信,根据 MultiProcessing官网 给的提示,有两种方法能够来实现进程间的通信,分别是pipe和queue.因为看queue顺 ...
- html5中的全局属性
在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...
- svn 不能添加.a文件
1.打开终端输入 open ~/.subversion/ 2.双击打开config文件 3.修改如下两行 # global-ignores = *.o *.lo *.la *.al .libs ...