iframe怎么自适应窗口

真正的让iframe自适应高度兼容多种浏览器随着窗口大小改变

今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是当窗口放大时iframe没有自动跟随变大显得很小,或是当窗口缩小时iframe还是之前那么大就出现了滚动条.还有或是高度不准确,那么就达不到想要的效果了. 为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在

iframe高度自适应

前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com,页面B的域名是http://www.tmall.com,如果A使用iframe引用页面B,如何做到iframe的高度自适应(即B内容有多高,iframe就有多高) 在这里首先分析一下如果不涉及跨域或者只是主域相同,子域不同的情况下的解决方案: 父页面代码: <!DOCTYPE html> <

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: // document.domain = "caib

跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.这

跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.

（转）iFrame高度自适应

第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offset

解决iframe作为子窗口，刷新后iframe页面跳转到其它页面的问题

转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分. 好处:(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面. (2)加载的资源要少,所以用时更少,而且消耗服务器的流量会少一点. (3)统一管理菜单内容,不需要每个页面都写菜单,增加,修改方便. 缺点:(

iframe高度自适应（同域）

今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframeid.contentDocument &&

完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了吗? No

IFrame 高度自适应的两种方式 .

iframe 高度自适应一般是指: iframe 本身的高度 = 内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: iframe本身的高度=内容高度,在内容加载后,再重新设置Iframe高度.

Iframe刷新父窗口的几种方式

/*Iframe刷新父窗口的几种方式在iframe的子页面中,使用onload刷新父页面的时候,遇到了一些问题. 1.目前来说,测试成功,并且兼容IE6/7和FF的刷新方式. */ <script language=JavaScript> parent.window.location.href="url"; </script> //2.个别情况下出现IE6/7“没有权限”的JS错误提示信息,FF下也出现错误提示.原因不明. <script language

兼容firefox的iframe高度自适应代码

网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type="text/javascript"> function SetCwinHeight(iframeObj){ if (document.getElementById){ if (iframeObj){ if (iframeObj.contentDocument && i

jQuery实现iframe的自适应高度

假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240" width="100%" frameborder="0" scrolling="auto"></iframe> 那么我们在test.html中的代码如下 01 02 03 04 05 06 07 08 09 10 11

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe 了第一博客的页面 http://www.diyibk.com/ 当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

CSS完美实现iframe高度自适应（支持跨域）

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了

Iframe高度自适应（兼容IEFirefox、同域跨域）

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便.于是自动调整iframe的高度就成为本文的重点. 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 同域时Iframe高度自适

实现iframe高度自适应

iframe高度自适应使用场景是类似于微博,新闻等点击加载更多这种功能实现,要求iframe的高度能够跟随内容的变化而变化. 父html文件,也就是引用ifram的文件 src="blog/blog.display.html" 引用的文件 id="blog-display" 全局唯一ID scrolling="no" 去除滚动条 <iframe src="blog/blog.display.html" id="

iframe 高度自适应

iframe内容自适应高度

一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe自适应高度====>推荐使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X

iframe 和父窗口传递

iframe 向父窗口 window.parent.postMessage('向父窗口传递值',*); 父窗口向 iframe 内部子窗口传值 documnet.querySelector('iframe').contentWindow.postMessage('向iframe传递值',*); 接受信息 window.addEventList('message', (e) => { console.log(e.data); }); 如果执行 e.data 不存在 window.addEventL

Iframe高度自适应（兼容IE/Firefox、同域/跨域）

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便.于是自动调整iframe的高度就成为本文的重点. 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 同域时Iframe高度自适

iframe怎么自适应窗口

热门专题