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 里的高度适应的问题的更多相关文章

  1. iframe 里的高度自适应

    由于公司里的很多东西都要用到iframe 导致我不得不各种百度 首先是自适应高度 // document.domain = "caibaojian.com"; function s ...

  2. 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素

    最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...

  3. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  4. iframe里访问父级里的方法属性

    window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名 window.parent.Func();  // 访问属性Func()是在父 ...

  5. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  6. 自动适应iframe右边的高度

    在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度. 这时候找到了一个解决方法: <iframe name="my_iframe ...

  7. js获取iframe里的body内容

    做个页面 需要加入a.html 使用的js动态添加iframe 直接JQ添加的 代码 $(".banner-box").after(“<iframe src="ht ...

  8. 用jQuery在IFRAME里取得父窗口的某个元素的值

    收集网上的一些示例: 用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window. ...

  9. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

随机推荐

  1. 让Myeclipse自动生成的get set方法 自动加上文本注释,并且注释内容包含字段中我们加的文档注释

    在进行编码写实体类的时候发现,一个实体类有好多的字段要进行注释,他们都是私有的不能直接访问,我们在写的时候加入的文档注释也起不到效果,但是自动生成的get,set方法的文档注释有不符合我们要求(没有包 ...

  2. Dynamics 365 for CRM:CRM与ADFS安装到同一台服务器,需修改ADFS服务端口号

    CRM与ADFS安装到同一台服务器时,出现PluginRegistrationTool 及 CRM Outlook Client连接不上,需要修改ADFS的服务端口号,由默认的808修改为809: P ...

  3. Django—templates系统:模版语言

    常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊的含义, ...

  4. Spark ML源码分析之四 树

            之前我们讲过,在Spark ML中所有的机器学习模型都是以参数作为划分的,树相关的参数定义在treeParams.scala这个文件中,这里构建一个关于树的体系结构.首先,以Decis ...

  5. 【详细】总结JavaWeb开发中SSH框架开发问题(用心总结,不容错过)

    在做JavaWeb的SSH框架开发的时候,遇到过很多的细节问题,这里大概记录下 我使用的IDE是Eclipse(老版本)三大框架:Spring4.Struts2.Hibernate5 1.web.xm ...

  6. 敏捷开发每日报告--day5

    1 团队介绍 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(267),蔡凯峰(285)  Git链接:https://github.com/WHUSE2017/C-team 2 ...

  7. 标准C++类std::string的内存共享和Copy-On-Write(写时拷贝)

    标准C++类std::string的内存共享,值得体会: 详见大牛:https://www.douban.com/group/topic/19621165/ 顾名思义,内存共享,就是两个乃至更多的对象 ...

  8. (原创)带模板的OLE输出EXCEL

    其实带模板的OLE输出EXCEL就是将要输出的EXCEL中一些拥有固定值(如标题,表头行等)的单元格先填充好数据和设置好格式后作为模板上传到SAP 中.这样后续在输出EXCEL时只需从SAP中将模板下 ...

  9. [知识梳理]课本1&2.1-2.5

    面向对象的语言 出发点:更直接地描述客观世界中存在的事物(对象)以及它们之间的关系. 特点: 是高级语言. 将客观事物看作具有属性和行为的对象. 通过抽象找出同一类对象的共同属性和行为,形成类. 通过 ...

  10. R语言基础1

    ----------------------------------R语言学习与科研应用,科研作图,数据统计挖掘分析,群:719954246-------------------------- 我们将 ...