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

实现

A.com/detail/view 页面的iframe代码如下:

<iframe id="thirdiframe" src="http://B.com/location/testiframe" width="100%" scrolling="no" frameborder="0" height="900"></iframe>

B.com是第三方的域名,所以要求在B.com/location/testiframe的页面增加下面的html

<iframe id="aiframe" src="#" style="display:none"></iframe>
<script type="text/javascript">this.document.getElementById("aiframe").src="http://A.com/detail/iframe?height=" + window.innerHeight;</script>
A.com/deatil/iframe是A提供的动态接口,返回的数据是一段js:
<script type="text/javascript">parent.parent.document.getElementById("thirdiframe").style.height="20px";</script>

这段中的20px是根据参数来生成的

基本这样就可以了。但是在同事的提醒下,考虑到后面几个问题:

1 动态接口的安全问题

A.com/detail/iframe?height=20

会返回一段js,而这里返回的js是带传入参数的。所以这里很有可能会出现反射型XSS

所以在安全性上要注意一下,需要对height参数进行验证,比如使用php的intval这个函数来一劳永逸。

2 让B这个第三方嵌入一套html代码好吗?

这里不讨论B是否允许嵌入的商务问题。即使B允许嵌入了,但是以后万一想修改这个代码,还需要去让B来修改。

实际上让B嵌入一个A域名的js

<script type="text/javascript" src="http://A.com/detail/iframejs"></script>

这个js:http://A.com/detail/iframejs 是A提供的一个js,它受A(我方)控制,所以,这个逻辑就可以由A方进行控制了

这个js返回的内容如下:

function initA() {
var iframeA = document.createElement('iframe');
iframeA.src='http://A.com/detail/iframe?height=' + window.innerHeight;
iframeA.style.display='none';
iframeA.id='iframeA';
document.body.appendChild(iframeA);
} function updateAHeight(height) {
if (document.getElementById('iframeA') == null) {
init360();
}
var iframeA = document.getElementById('iframeA');
iframeA.src='http://A.com/detail/iframe?height=' + height;
} if (window.addEventListener) {
window.addEventListener('load', initA, false);
} else {
window.attachEvent('onload', initA);
}

对上面的一段代码,注意几点:

a 当页面加载完成之后再执行initA事件,需要使用addEventListener和attachEvent函数,不应该直接把document.onload来执行,因为B的页面本身可能会有绑定其他事件。

b addEventListener是firefox,chrome等使用的事件加绑定的函数,而attachEvent是IE使用的事件加绑定事件,所以需要分开来做。

c 这里为什么提供一个updateAHeight函数呢?因为有可能B的页面高度会进行变化,那么当B的页面高度变化的时候有没办法改变A的iframe的高度呢?

有两种方法:

c.1 B在改变页面高度的事件上调用一个函数,来修改B页面的iframe的src,其中,这里的updateAHeight就是这个用处的

c.2 做循环,循环体内就是将当前页面的高度设置值,传递给iframe,这个循环当然可以给http://A.com/detail/iframejs  这个js来做的。

总结

原本以为很简单的一个事情,整一整还可以整出这么多名堂,话说也好久没写js了。。。代码啥的,都是技术熟练活啊。。。

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

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

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

  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. Linux环境安装jdk

    Linux中JDK1.6的安装和配置方法 一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i5 ...

  2. android 平台搭建

    直接到官网下载 http://developer.android.com/sdk/index.html?utm_source=weibolife

  3. MiniDao-PE精简版

    https://github.com/zhangdaiscott/minidao-pe MiniDao-PE精简版 MiniDao-PE 简介及特征 MiniDao-PE 是一种持久化解决方案,类似m ...

  4. (ETW) Event Trace for Windows 提高 (含pdf下载)

    内容提纲 • 托管代码与非托管代码介绍 • 不安全代码介绍 • 用户模式与内核模式 • ETW执行流程分析 • 日志分析工具介绍:PerfView.exe   ETW与非托管代码 • ETW依赖的So ...

  5. C#数据库绑定

    .Net对数据库的绑定 using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...

  6. Codeforces Round #379 (Div. 2) E. Anton and Tree 缩点 直径

    E. Anton and Tree 题目连接: http://codeforces.com/contest/734/problem/E Description Anton is growing a t ...

  7. iOS开发——项目实战总结&Block使用注意点浅析

    Block使用注意点浅析 1.在使用block前需要对block指针做判空处理. 不判空直接使用,一旦指针为空直接产生崩溃. if (!self.isOnlyNet) { if (succBlock ...

  8. Hibernate一些防止SQL注入的方式

    Hibernate在操作数据库的时候,有以下几种方法来防止SQL注入,大家可以一起学习一下. 1.对参数名称进行绑定: Query query=session.createQuery(hql); qu ...

  9. C#中控件数组的讨论

    VB用得习惯后,到C#中来觉得很奇怪,如此好的控件数组怎么不见了.“众所周知,控件数组最主要的两个优点:可以循环附值:可以响应同一个事件.从而大大简化了代码.引自http://wenku.baidu. ...

  10. 一些值得学习和借鉴的.Net 开源项目

    1.DotNetFramework .NET Reference Source 发布了 beta 版,可以在线浏览 .NET Framework 4.5.1 的源代码,并且可以通过配置,在 Visua ...