iframe 里的高度适应的问题
iframe 这个东西功能是很强大,但是有一个巨大的问题就是高度自适应的问题;
不过这个问题,百度或者谷歌上有很多解决办法,但是,很多时候都有兼容性问题; 所有我就每个方法都试了一遍,终于找到了一个
感觉很牛的样子,不需要用到js 就可以让iframe 里的内容覆盖整个页面,感觉很舒服。哈哈哈
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
</style>
<body> <div>
<iframe id="external-frame" src="https://cdn-huoshu.fire2333.com/landpages/rxgl/template/4039/index.php?pt=7590&footer_id=1" width="100%" height="100%" scrolling=" no"></iframe>
</div>
</body> </html>
这样,就可以完美的解决这个问题啦;
有三点要注意哦:
第一:一定要已html开头,而不是用<!DOCTYPE html>开头
第二:body的overflow:hidden ; 一定不要忘记加;
第三:iframe 的高度100%一定要记得加上。这样就解决了我的问题了;
虽然不知道这种实现的原理是什么,希望有知道的朋友可以告诉我下。
这在跨域的时候,是真的好用,尤其是不能修改iframe 里的页面的时候;
同域的话:
有一段js代码就可以解决这个问题啦;
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
}; window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
在页面里插入这个就好啦;
我觉得这两个方法完美的解决了我公司一些php们的问题。
天天都在用iframe结果用的还那么不清楚,实在搞不懂。
尤其是某个php,什么css js html都不会,真心不知道他是怎么成为php的。连获取元素都不会。很气
瞎抱怨下,反正没人看。哈哈哈哈,总之这两种方法我觉得很好。赞;
iframe 里的高度适应的问题的更多相关文章
- iframe 里的高度自适应
由于公司里的很多东西都要用到iframe 导致我不得不各种百度 首先是自适应高度 // document.domain = "caibaojian.com"; function s ...
- 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素
最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- iframe里访问父级里的方法属性
window.parent.attributeName; // 访问属性attributeName是在父级窗口的属性名 window.parent.Func(); // 访问属性Func()是在父 ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
- 自动适应iframe右边的高度
在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度. 这时候找到了一个解决方法: <iframe name="my_iframe ...
- js获取iframe里的body内容
做个页面 需要加入a.html 使用的js动态添加iframe 直接JQ添加的 代码 $(".banner-box").after(“<iframe src="ht ...
- 用jQuery在IFRAME里取得父窗口的某个元素的值
收集网上的一些示例: 用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window. ...
- jQuery实现iframe的自适应高度
假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...
随机推荐
- 压力测试(webbench、ab、siege)
在本地安装webbench,步骤如下: wget http://www.ha97.com/code/webbench-1.5.tar.gz tar zxvf webbench-1.5.tar.gz m ...
- 《UNIX网络编程 卷1:套接字联网API》读书笔记(一):网络编程简介
概述 要编写通过计算机网络通信的程序,首先要确定这些程序相互通信所用的协议.大多数网络是按照划分成客户和服务器来组织的.本章及后续章节的焦点是TCP/IP协议族,也可称为网际协议族.下图为客户与服务器 ...
- mysqldump 备份脚本
#!/bin/bash DUMP=/usr/bin/mysqldump OUT_DIR=/home/mysql LINUX_USER=root DB_NAME=snale DB_USER=root D ...
- python开发装饰器的应用
python全栈开发-Day10 装饰器(闭合函数的应用场) 一. 装饰器 装饰器就是闭包函数的一种应用场景 什么是闭包函数?我们再来回忆一下: 闭包函数: 定义在函数内部的函数,并且该函数包含对 ...
- hibernate框架学习笔记5:缓存
缓存不止存在与程序中,电脑硬件乃至于生活中都存在缓存 目的:提高效率 比如IO流读写字节,如果没有缓存,读一字节写一字节,效率低下 hibernate中的一级缓存:提高操作数据库的效率 示例: 抽取的 ...
- 团队作业2:需求分析&原型设计
Deadline: 2017-11-5 22:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以 ...
- jsonp处理
def loads_jsonp(self,_jsonp): try: return json.loads(re.match(".*?({.*}).*",_jsonp,re.S).g ...
- linux下面的智能解压脚本smart解压
file命令可以辨别出一个给定文件的文件类型,如:file lf.gz,其输出结果为: lf.gz: gzip compressed data, deflated, original filename ...
- 数据结构-线性表的链式存储相关算法(C语言实现)
链表的简单介绍 为什么需要线性链表 当然是为了克服顺序表的缺点,在顺序表中,做插入和删除操作时,需要大量的移动元素,导致效率下降. 线性链表的分类 按照链接方式: 按照实现角度: 线性链表的创建和简单 ...
- 剑指offer-链表中环的入口节点
题目描述 一个链表中包含环,请找出该链表的环的入口结点. 解题思路 解决这个问题的第一步是如何确定一个链表中包含环.可以定义两个指针,同时从链表的头结点出发,一个指针一次走一步,另一个一次走两步.如果 ...