Iframe 高度自适应 example （跨子域实现）
跨子域的iframe高度自适应
比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/'，这种跨子域的页面,实现起来也比较简单，看下面的详细代码：
<!doctype html>
<html >
<head>
<title>iframe 自适应高度测试</title>
<style>
iframe{
background-color:aquamarine;
width:100%
}
</style>
</head> <body>
<iframe src="./index1.html" frameborder="0" id="ifr"></iframe>
</body>
</html>
<!doctype html>
<html>
<head>
<title>hello</title>
<style>
#one {
width: 100px;
height: 1110px;
background-color: #ff6a00;
}
</style>
</head>
<body>
<div id="one"> </div>
<script>
// 计算页面的实际高度，iframe自适应会用到
//www.kzwr.com 欢迎朋友们前来交流
function calcPageHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height = Math.max(cHeight, sHeight)
return height
}
window.onload = function () {
var height = calcPageHeight(document)
parent.document.getElementById('ifr').style.height = height + 'px'
}
</script>
</body>
</html>
Iframe 高度自适应 example （跨子域实现）的更多相关文章
- 跨子域的iframe高度自适应
一.跨子域的iframe高度自适应 比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面 3.html 1 2 3 4 5 6 7 8 9 10 11 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- CSS完美实现iframe高度自适应（支持跨域）
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- Iframe高度自适应（兼容IE/Firefox、同域/跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- iframe高度自适应
前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
随机推荐
- 百度地图SDK的使用
最近看了一些SDK相关的东西,就心血来潮用了一下百度地图的sdk. 百度的文档真的很有问题,配置步骤也错漏很多. 1.首先百度地图的demo一直都是和最新的android studio版本不搭的,问题 ...
- Unity 单例
1. 继承于MonoBehaviour(不随着场景切换而销毁) 基类代码: using System.Collections; using System.Collections.Generic; us ...
- Spring Boot tomcat参数
主题 初学SpringBoot,想要配置一下tomcat的端口,以前tomcat直接在它的XML里配置就好了.现在SpringBoot直接继承了,不知道哪里配置.后来找到解决方法,记录一下. 具体方法 ...
- Elasticsearch-PHP 快速开始
快速开始 本章节会给你一个客户端的主要功能(函数)是如何工作的快速概述. 安装 引入(包含)elasticsearch-php 在你的 composer.json 文件: { "requir ...
- Python编辑器IDLE傻瓜入门
转自:http://bbs.csdn.net/topics/390451617 下载python进行安装,默认自带此工具开始->程序->Python 2.*/3.*-> IDLE ( ...
- HttpServletResponse返回页面弹窗
下载方法: @RequestMapping(value = "/download.htm") public void downLoadFile(String id,HttpServ ...
- jquery offset positon 获取位置不准的解决方法
问题: 本地开发时,由于使用了图片,而且使用了offset().top涉及到图片所在的div距离计算的部分,本地开发一切都没问题:但是部署到服务器上时却出现布局错乱,经过排查发现总是少了一个图片高度的 ...
- cdoj916-方老师的分身 III 【拓扑排序】
http://acm.uestc.edu.cn/#/problem/show/916 方老师的分身 III Time Limit: 3000/1000MS (Java/Others) Memo ...
- 10-stack
c++ stl栈stack介绍 C++ Stack(堆栈) 是一个容器类的改编,为程序员提供了堆栈的全部功能,——也就是说实现了一个先进后出(FILO)的数据结构. c++ stl栈stack的头文件 ...
- Windows下redis的安装与使用
Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...