iframe跨域动态设置主窗口宽高

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

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

操作步骤:

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

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

  

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

 1 <script type="text/javascript">
 2 !(function (){
 3     var search = window.location.search;
 4     if(!search || search.indexOf(‘zeus‘) === -1)return;
 5      var query = {};
 6      search.slice(1).split(‘&‘).forEach(function(item){
 7          var a = item.split(‘=‘);
 8         query[a[0]] = a[1];
 9      })
10     if(query.zeus){
11         var body = document.body;
12         var w = Math.max(body.scrollWidth, body.clientWidth);
13         var h = Math.max(body.scrollHeight, body.clientHeight);
14         var iframeNode = document.createElement(‘iframe‘);
15         iframeNode.style.display = ‘none‘;
16         iframeNode.src = query.zeus + ‘/m/iframe/ware#‘ + w + ‘|‘ + h;
17         body.appendChild(iframeNode);
18     }
19 })();
20 </script>  

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

 1 const setIframeWH = () => {
 2   const outerWindow = window.parent.parent;
 3   const locationPathname = outerWindow.location.pathname;
 4   const idname = locationPathname.replace(/\//gi, ‘__‘);
 5   let iframeMain = outerWindow.document.getElementById(idname);
 6   let hash = window.location.hash;
 7   if (iframeMain && hash.indexOf(‘#‘) >= 0) {
 8     let [width, height] = hash.slice(1).split(‘|‘);
 9     iframeMain.style.width = `${width}px`;
10     iframeMain.style.height = `${Number(height) + 50}px`;
11   }
12 }

原文地址:https://www.cnblogs.com/wwwweb/p/8302569.html

时间: 2024-11-06 00:47:49

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

动态设置ImageView的宽高以及位置

如何动态设置ImageView的宽高以及位置 package com.pic; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; public class PicTest extends Activity { private final

动态获取手机屏幕宽高及动态设置控件宽高

1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenWidth = dm.widthPixels; int screenHeight = dm.heightPixels; 22.根据屏幕宽度为控件设置动态设置宽高: imageView.setImageResource(R.drawable.newscar); L

GridView动态设置Item的宽高 第一个Item不显示的问题

在viewpaper中添加了一个Gridview,每个viewpaper要正好铺满显示3X2个,由于girdview是纵向可扩展的,所以我需要动态设置Gridview中item的高度,来确认铺满. 遇到的问题:Gridview中第一个item不显示 动态设置Item的高度只需要在adapter的getView方法中 使用parent的宽高进行重新计算就行了 废话不多说,直接上代码 <pre name="code" class="java">@Overri

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

前言 这个问题在之前做一个盒子项目时遇到过,最近又遇到了,使用GridView遇到的非常奇葩的问题,这里记录分享一下. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 一.问题 1.1 先看问题代码: @Override    public View getView(int position, View convertView, ViewGroup parent) {     

android安卓动态设置控件宽高

LayoutParams layoutParams=imageView.getLayoutParams(); layoutParams.width=100; layoutParams.height=200; imageView.setLayoutParams(layoutParams);

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

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

Iframe简单探索以及Iframe跨域处理

探索Iframe 本文目的: Iframe简单使用 Iframe跨域 Iframe常见问题 一.Iframe基本Dom以及常用属性和常用事件 1.DOM: <iframe class="iframe" style="height: 100%;width: 100%;border: 0;" id="Yiframe" name="Yiframe" src='http://localhost:2255/67iframe-2.h

iframe跨域访问

js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&

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

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包