问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置iframe的height属性呢?

这个本质就是跨域设置的问题。

一种解法

B和C提供一个jsonp接口,让有iframe的页面A来调用,这个jsonp接口的目的就是告诉A,我的页面的高宽各是多少。

第二种解法

1 首先给A页面的iframe设置个id,比如id=”aiframe”

2 B和C页面内嵌一段html:

<iframe src=”http://A.com/detail/iframe?height=200&weight=100”></iframe>

3 其中http://A.com/detail/iframe 是A提供的一个接口,这个接口返回一段js

<script type=”text/javascript”>parent.parent.getElementById(“aiframe”).style.height=”200px”</script>

由于这个接口是动态的,这里返回的200是根据B或者C调用接口的参数返回的。

再由于这个接口和有iframe的A是同域的,所以可以操作iframe的DOM属性。

补充

第二种解法可以做扩充完善:

1 第2步中的B,C内嵌的html可以使用window.innerHeight来自动获取页面

2 第2步中的内嵌html可以替换成一个A的js文件,这个文件做的事情就是append这个A

如何根据iframe内嵌页面调整iframe高宽的更多相关文章

  1. 如何根据iframe内嵌页面调整iframe高宽续篇

    接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...

  2. Python3.x:selenium获取iframe内嵌页面的源码

    Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...

  3. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

  4. iframe内嵌页面——跨域通讯

      <template> <div class="act-form"> <iframe :src="src" ref=" ...

  5. MetaBase使用iframe内嵌到Vue页面样式优化

    Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...

  6. [转]内嵌页面iframe以及和其兄弟iframe的相互传值

    原文出处 iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主 ...

  7. 关于selenium自动化对iframe内嵌元素的处理

    今天上班闲来无聊,于是来练练自动化,结果碰上了可恶的iframe,楼主,以前也遇到过,但是一直也没搞懂怎么处理的,都是抄别人的代码,今天决定独立解决试试.首先先来认识什么是iframe,它就长下图这样 ...

  8. HTML+CSS教程(二)frameset框架和iframe内嵌

    一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...

  9. WebBrowser内嵌页面的跨域调用问题

    很早之前我写过一篇Blog:网页通过External接口与WebBrowser交互,文中的交互其实只介绍了JS调用C++的部分,而C++调用JS由于微软自己的例子太多,那篇文章就没介绍,不过我最近遇到 ...

随机推荐

  1. mysql 查看正在运行的进程

    show processlist ; 显示正在运行的进程,使用Kill命令删除 kill 5260;

  2. FoxMail的Bug

    Foxmail 7.2 build6.040,win7中文专业版 下载腾讯的企业邮箱的邮件, 自动配置为imap收邮件 收件箱应该为1740封 邮件 实际foxmail却只收到1500多封 改成pop ...

  3. Jmeter之JDBC Request使用方法(oracle)

    JDBC Request: 这个sampler可以向数据库发送一个jdbc请求(sql语句),它经常需要和JDBC Connection Configuration 配置元件一起配合使用. 目录: 一 ...

  4. H-Basis/SG/SH GI Relighting

    小试了一把预计算全局光照,作为PRT的上级应用.完全自行实现,使用SG/SH.H-Basis基波对GI光场进行频域压缩,存在3D纹理中,用于2跳间接光照实时显示.其中坑点不少,尤其是在HDR环境下使用 ...

  5. 为EasyUI 的Tab 标签添加右键菜单

    在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...

  6. Scala 深入浅出实战经典 第43讲:主要介绍类型变量bound

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  7. 用git写书

    apebook.org  www.apebook.org 最好的程序员图书免费托管服务 apebook 提供了 gitbook.com 类似的云端图书托管能力,图书基于广受欢迎的 gitbook 工具 ...

  8. Intellij Idea 15 旗舰版 破解

    转自:http://my.oschina.net/nyp/blog/533991(良心呀,真的好使) 注册方法:   注册码可以沿用14的,只是在 注册时选择 License server ,填 ht ...

  9. [Compose] 20. Principled type conversions with Natural Transformations

    We learn what a natural transformation is and see the laws it must obey. We will see how a natural t ...

  10. [原创]android自定义动画的一点感悟

    android提供了一系列的动画处理api,包括animator以及animation等.由于动画效果是根据人眼视觉残留原理形成的,因此动画过程中android需要不断频繁的更新view的相关属性,由 ...