iframe跨域动态设置主窗口宽高
2024-10-19 19:59:31
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`;
}
}
最新文章
- salesforce 零基础学习(二十二)Test简单使用
- adb device出现error:unknown host service
- apache+tomcat 负载均衡
- SQL中使用WITH AS提高性能(二)
- boost------asio库的使用2(Boost程序库完全开发指南)读书笔记
- Cortex-M0系统滴答定时器Systick详解
- 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】
- .net Mvc Controller 接收 Json/post方式 数组 字典 类型 复杂对象
- tree btn
- Java中面向字符的输入流
- api接口写好了?想过(Accept,Content-Type)?返回类型json|xml?
- 剑指Offer-平衡二叉树
- pyqt5安装问题
- Ubuntu16.04网络不能访问解决办法
- 潭州课堂25班:Ph201805201 django 项目 第三十九课 后台 文章发布,图片上传到 FastDFS后端实现 七牛云讲解(课堂笔记)
- android 3.0+百度地图api地图如何移动到指定的经纬度处
- CentOS7.2调整Mysql数据库最大连接数
- Go指南练习_Stringer
- wps 根据单元格值 设置单元格所在行 颜色(大于0 行红色 小于0 行xx色)
- Ansible test