如何根据iframe内嵌页面调整iframe高宽
问题来自于工作的实例,我的一个域名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高宽的更多相关文章
- 如何根据iframe内嵌页面调整iframe高宽续篇
接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...
- Python3.x:selenium获取iframe内嵌页面的源码
Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- iframe内嵌页面——跨域通讯
<template> <div class="act-form"> <iframe :src="src" ref=" ...
- MetaBase使用iframe内嵌到Vue页面样式优化
Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...
- [转]内嵌页面iframe以及和其兄弟iframe的相互传值
原文出处 iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主 ...
- 关于selenium自动化对iframe内嵌元素的处理
今天上班闲来无聊,于是来练练自动化,结果碰上了可恶的iframe,楼主,以前也遇到过,但是一直也没搞懂怎么处理的,都是抄别人的代码,今天决定独立解决试试.首先先来认识什么是iframe,它就长下图这样 ...
- HTML+CSS教程(二)frameset框架和iframe内嵌
一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...
- WebBrowser内嵌页面的跨域调用问题
很早之前我写过一篇Blog:网页通过External接口与WebBrowser交互,文中的交互其实只介绍了JS调用C++的部分,而C++调用JS由于微软自己的例子太多,那篇文章就没介绍,不过我最近遇到 ...
随机推荐
- samba权限之easy举例说明--原创
实验环境RHEL5.0,samba3.023rc-2 一.何为browsealbe=no? 如图lingdao目录的权限为777 如图ling目录的共享设置和用户的ID和组 当用户lingdao_01 ...
- Android系列---JSON数据解析
您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...
- 进程、线程、轻量级进程、协程与 go 的 goroutine【转载+整理】
本文内容 进程 线程 协程 Go 中的 goroutine 参考资料 最近,看一些文章,提到"协程"的概念,心想,进程,线程,协程,前两个很容易,任何一本关于操作系统的书都有说,开 ...
- 100+诡异的数据集,20万Eclipse Bug、死囚遗言等
摘要:近日,Robert Seaton整理了100多个最有趣的数据集,其中包括Jeopardy真题,死囚的最后一句话,20万个Eclipse Bug,足球比赛相关,柏拉图式的爱情,太阳系以外的行星,1 ...
- Codeforces Round #384 (Div. 2) C. Vladik and fractions 构造题
C. Vladik and fractions 题目链接 http://codeforces.com/contest/743/problem/C 题面 Vladik and Chloe decided ...
- 最近读的javascript,一些文章
本帖子是记录一些javascript的一些文章: 1. 理解node.js 2.异步编程 http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF% ...
- 火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥的解决办法
连接 https网址 时发生错误. 在服务器密钥交换握手信息中 SSL 收到了一个弱临时 Diffie-Hellman 密钥. (错误码: ssl_error_weak_server_ephemera ...
- Mac OS 下安装wget
环境: Mac OS X 10.9.4 1 下载源码 地址: http://ftp.gnu.org/gnu/wget/wget-1.9.tar.gz 2 解压安装 tar zxvf wget-1.9 ...
- [整理]C#反射(Reflection)详解
本人理解: 装配件:Assembly(程序集) 晚绑定:后期绑定 MSDN:反射(C# 编程指南) -----------------原文如下-------- 1. 什么是反射2. 命名空间与装配件的 ...
- Android中用layer-list编写阴影效果
要实现这种效果当然有多 种方式,比如背景图片直接加阴影效果,或者用代码画一个(onDraw()).这次我们直接用layer-list来实现.在项目 res->drawable中创建一个xml,如 ...