Web开发网 > 站内搜索 > iframe自适应高度
iframe 自适应 高度 ，设置iframe 的高度 为加载内容的高度 ，不出现滚动条。iframe 自适应 高度 源代码如下test.htmla href=index.html target=myifrindex.html/aiframe src=index.html name=myifr style=width:100% onload=setIfrHeight(this)/iframescript function setIfrHeight(el) { el.style.height = el.contentWindow.document.body.offsetHeight + http://www.w3dev.cn/article/20170610/iframe-auto-height.aspx
当有2级域名使用iframe 对象加载其他的信息的时候，要想自动调节iframe 的高度 ，如果不进行一些设置，会出现跨域的问题。 这里说的是2级域名和对应的顶级域名直接实现跨域，而不是不同顶级域名和2级域名直接的跨域。 如我有一个顶级域名/，如果在/中的iframe 用remark./2级域名来加载其他信息显示顶级域名或者其他javascript./这种2级域名上，是可以的。但是不能跨顶级域名，如加载百度或者替他网站的信息，这样通过此办法无法实现跨域iframe 自动适应高度 。在顶级域名一样的情况下，实现2级域名跨域控制顶级或者其他2级域名中显示的iframe 的高度 ，可以通过设置document.http://www.w3dev.cn/article/20101220/second-level-domain-cross-domain-iframe-auto-fit-height.aspx
------------Iframe自适应高度+展开-HTMLscriptlanguage="JavaScript"//**iframe 自动适应页面**////输入你希望根据页面高度 自动调整高度 的iframe 的名称的列表//用逗号把每个iframe 的ID分隔.例如:["myframe1","myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe 的IDvariframeids=["content"]//如果用户的浏览器不支持iframe 是否将iframe 隐藏yes表示隐藏，no表示不隐藏variframehide="yes"functiondyniframesize(){vahttp://www.w3dev.cn/article/20090701/333.aspx
v id="content"/div/divdiv id="footer"/div 具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度 就会增高，同时#mainbox的高度 也会撑开，#footer层就自动下移。这样就实现了高度 的自适应 。另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。这个方法存在另一个问题，就http://www.w3dev.cn/article/20090811/719.aspx
0px;' +'iframe class=ke-textarea frameborder=0 style=width:100%;height:100%;/iframe ' +'/div',dialog = self.createDialog({name : name,width: '100%',/////title : self.lang(name),body : html}),iframe = K('iframe ', dialog.div),doc = K.iframeDoc(iframe );doc.open();dochttp://www.w3dev.cn/article/20170314/kindeditor-preview-window-set-to-fullscreen.aspx
t.body.innerHTML+="iframeid='"+this.id+"'name='"+this.name+"'/iframe ";elsedocument.write("iframeid='"+this.id+"'name='"+this.name+"'/iframe ");this.element=document.getElementById(this.id);}else{this.element=document.createElement("IFRAME ");this.element.id=this.id;this.element.name=this.name;documenhttp://www.w3dev.cn/article/20110212/CreatePopup-showModalDialog-showModalessDialog.aspx
ntextmenu="return false"14。div＋css布局用了float之后背景不能延伸的解决方案div style="clear: both; font-size: 0;"/div原因：背景的自适应 高度 并不继承float的高度 ，背景会继承float底线所在容器中的位置高度 ，所以背景一定会找到最后一个标签去测定，这样我们在如上的标签，这个标签中什么也不放。也就是一个没有高度 的空容器，这样它就可以把背影拉下来了。15.用JS来处理图片变形的问题，等比例缩放图片，还能防止图片在加载过程中因为图片太大而引起的变形script language="JavaScript" type="thttp://www.w3dev.cn/article/20090811/727.aspx
给body元素设置背景色，但是body没有内容，高度 没有填充整个浏览器情况下，浏览器整个窗口都是body设置的背景色，这个是什么导致的？ 测试代码如下啥？？？body高度 才28（默认margin 8x2+padding 5x2+border 1x2）？？那整个浏览器的颜色是哪里来的？？？？？ !doctype htmlstyle body{background:#f00;border:solid 1px #000;padding:5px}/style 截图可以看出来body并没布满整个浏览器窗口，但是设置的背景色填充整个浏览器。下面是来自一些网上收集的解释。1）来源：http:/http://www.w3dev.cn/article/20170307/body-height-zero-background-color-fill-browser-window.aspx
jQuery自适应 容器焦点图，兼容移动端浏览器，支持移动端的touch触碰事件滑动切换图片。效果如下 兼容移动端的焦点图，只要放到指定的容器中，焦点图会自动水平填满容器宽度，移动端显示只需要控制指定容器的宽度，不需要关心焦点图显示，会自动填满此容器宽度，高度 等比计算得出，图片不会变形。 jQuery自适应 容器焦点图，兼容移动端浏览器源代码和使用说明如下PC端浏览器可以更改窗体大小查看自适应 效果，移动端开启自动转屏，然后切换屏幕横竖方向测试。!doctype htmlmeta name=viewport content=width=device-width,initial-scale=1http://www.w3dev.cn/article/20160308/jQuery-self-adaption-image-slider-mobile-friendly.aspx
flow:hidden的样式，并且设置了tab body的宽度为初始化的浏览器宽度，父容器是依据浏览器实际宽度来定位。当tab添加好后，更改浏览器窗体可能出现2个问题。当宽度小于初始化宽度就会导致iframe 的滚动条隐藏起来如果大于初始化宽度，会导致iframe 没有占满整个父容器。tab body设置了宽度 在添加新tab时重新设置tab body的宽度为auto即可解决浏览器大小更改后iframe 没有滚动条或无法占满容器的问题。 function addTab(subtitle, url) { if (!$('#tabs').tabs(&http://www.w3dev.cn/article/20141229/easyui-tabs-iframe-scroll-bar-hidden.aspx
使用谷歌chrome浏览器时，如果双击运行或者拖拽html文件进入chrome中以file协议查看js效果，由于chrome的同源策略，父页无法访问iframe 中的内容，iframe 也无法通过parent对象获取父页的引用。同样对于window.open打开的本地网页，也无法通过opener或者存储打开页面的句柄来访问被打开的页面，在chrome控制台会出现下面类似的错误信息Uncaught SecurityError: Blocked a frame with origin null from accessing a frame with origin null. Protocols,http://www.w3dev.cn/article/20141105/chrome-file-access-can-not-get-iframe-parent-opener-nul.aspx
-浏览器或者为添加xhtml申明的IE8浏览器（IE9+未测试），动态创建的iframe ，当通过setAttribute设置iframe 的frameborder时，IE下调用setAttribute设置属性时，frameborder是严格区分大小写，属性名称要写为frameBorder，不能为frameborder，否则无法去掉iframe 的frameborder，会默认为1。 标准浏览器或者添加了xhtml申明的IE8+浏览器没有这个问题。 测试代码如下，动态创建的iframe 和直接在dom里面放置的iframe ，第一个边框没有被去掉div id=dv/divscript windhttp://www.w3dev.cn/article/20140617/IE-create-iframe-set-frameborder-0.aspx
例存储iframe 编辑器对象的属性为edit，edit属性又包含了iframe 对象集合，通过调用get方法获取到iframe DOM对象，就可以按照操作iframe 的方法获取需要的iframe 内容了。示例代码如下var editor;KindEditor.ready(function (K) { editor = K.create('textarea[name=content]', { allowFileManager: true, filterMode: false }); var iframe = editor.edit.iframe .gehttp://www.w3dev.cn/article/20131205/get-kindeditor-iframe-dom-object.aspx
css如何禁止用户操作iframe 的内容（iframe 加载的可能是跨域的页面），如选择iframe 里面的内容。 解决办法就是用一个透明的层遮盖在iframe 上方，这样就无法操作底层的iframe 了。 测试代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitlecss控制不允许操作iframe 内容/titlestyle.mask{position:absolute;width:100%;heighhttp://www.w3dev.cn/article/20131107/css-control-forbidden-operate-iframe.aspx
显示时，如果2级菜单包含iframe ，移动到iframe 中2级菜单会自动隐藏解决办法。在chrome，firefox下不会有此问题。 解决办法如下：用js来控制包含iframe 的2级菜单的显示或者隐藏，其他不包含iframe 的则用css控制!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitleIE浏览器下，用CSS控制2级下拉菜单显示时，如果2级菜单包含iframe ，移动到iframe 中2级菜单会自动隐藏解决http://www.w3dev.cn/article/20130813/IE-css-control-drop-menu-contain-iframe-hidden.aspx
即可。。。 //doPost()}/scriptinput type=button value=通过代理iframe 操作跨域的页面test.asp onclick=setCrossDomainByAgent()/!--代理iframe ，实际应用时可以增加style=display:none 隐藏起来--iframe id=ifrAgent name=ifrAgent src=about:blank/iframe 此方法也适用于父页放置的iframe 加载跨顶级域页面，如何从iframe 跨域的页面更新父页，测试代码如下，只做了些许改动，效果如下h.guilinjiaoyu.cn测试页面teshttp://www.w3dev.cn/article/20130723/javascript-cross-domain-operate-by-iframe-agent.aspx
var grid = Ext.create('Ext.grid.Panel' , { store: store, title: 'Ext.grid.Panel列自适应 宽度', columns: [ { text: 'ID', dataIndex: 'ID', width: colWidth.ID }, { http://www.w3dev.cn/article/20130716/Ext4-Ext.grid.Panel-column-auto-width.aspx
teElement('iframe '); ifr.name = 'xxoo'; document.body.appendChild(ifr); alert(ifr.name)//输出xxoo ifr = document.createElement('iframe name=byHTML/iframe '); //可以这样创建 //document.write('iframe name=byHTML/iframe ')//这样输出也行，http://www.w3dev.cn/article/20130708/document.createElement-iframe-ie-Compatible-mode-submitName.aspx
图吧地图在线标点地图在线生成地址：http://union.mapbar.com/onlineTagging.jsp，注册激活账户后生成地图标注界面如下 图吧在线标点地图需要注册才能生成iframe 引用的地址，效果如下。 iframe 引入的图吧在线标点地图效果http://www.w3dev.cn/article/20130424/iframe-load-tuba-map-overlay.aspx
容，而不是隐藏起来。没找到jqgrid提供的自适应 列宽度的方法，只好参考了下jqgrid最终生成的DOM结构，直接用jquery操作DOM结构实现自适应 列宽度功能。 实现方法：用一个新的表格，样式继承自jqgrid的样式，用来计算数据源中每一列的实际宽度，然后设置标头和内容表格中用来控制宽度的单元格。 备注：jqgrid版本为jqGrid 4.1.1，如果使用其他版本的jqgrid，可能DOM结构不一样，需要参考最终的DOM结构来修改部分代码 ｂｕｇ：当使用jqgrid的页头拖拽实现列宽修改时，出现的拖拽线和单元格不一致 jqgrid自适应 列宽度修改前后效果对比修改前效果修改后效果源http://www.w3dev.cn/article/20130217/jqgrid-auto-expand-cell-width.aspx
藏的iframe 加载asp.net页面，如aspx或者ashx，然后动态页执行死循环，在循环体中挂起当前执行aspx或者ashx页面的线程执行。aspx或者ashx页面定时输出js脚本更新父页的信息即可。 不过打开长连接后，浏览器进度条会一直处于加载的状态。 关键：serverpush.ashx这个页面一定要禁用缓冲或者调用Flush方法立即输出数据，要不看不到效果或者到缓冲区满后才发送数据到客户端 源代码如下test.htmldiv id=dvContent/divscript function appendContent(data) {//////注册事件提供给iframe 输出http://www.w3dev.cn/article/20130109/asp.net-iframe-server-push.aspx
http://www.w3dev.cn/article/20130103/DOCTYPE-xhtml-body-height.aspx
个高度 小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度 不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度 ，实际在 IE 下显示的仍然是一个 12 px 左右高度 的层，甚至max-height也不能解决。 要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度 的自动调整。比如div style=height: 6px; font-size: 0;/div 或者div style=height: 6px; overflow: hidden;/div 都可以阻止 IE 的浏览器下默认的高度 。http://www.w3dev.cn/article/20121219/ie-default-height.aspx
iframe 和父页，window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到 1)通过iframe 加载的，在iframe 中用parent对象得到父页window作用域，如果iframe 中又加载了iframe ，在最里层的iframe 中需要重复调用parent直到得到需要的父页作用域（如parent.parent）。如果是直接引用最顶级的父页作用域，可以使用top对象。 2)父页使用document.getElementById(iframe 的id).contentWindow得到iframe 的window作用域，如果iframe 还继续嵌套了iframe ，则还需要继续执http://www.w3dev.cn/article/20121205/iframe-parent-window.open-opener-interrelation.aspx
x请求 chrome浏览器iframe parent.document为undefined，对于window.open打开的页面也一样，不能使用opener对象。 今天测试一个脚本的时候发现，在谷歌chrome浏览器下面，iframe 中获取父页的document时竟然为undefined，google chrome神奇了，其他浏览器如ie，firefox没出现这种问题。 iframe 要获取到父页的document对象，需要通过服务器，就是http协议访问时才能获取到，要不直接双击运行【chrome为默认浏览器】或者直接拖进chrome浏览器查看时，iframe 使用parent.documhttp://www.w3dev.cn/article/20120914/chrome-iframe-parent.document-undefined.aspx
当一个div的高度 设置为很小时，如1px，在FireFox和其他w3c浏览器中显示正常，可是在I中却不止1像素高。原因是IE文字有个最小高度 ，对次div增加一个font-size:1px样式就能解决问题此问题。方法一定义一个CSS样式，在DIV调用其样式+展开-HTMLstyletype="text/css".test{height:1px;font-size:1px;}/styledivclass="test"/div 在IE6里实现，是2px的，还必须加上一句overflow:hidden，如下+展开-HTMLstyletype="text/css".test{height:1pxhttp://www.w3dev.cn/article/20120215/div-height-ie6-abnormal.aspx
p://www.torproject.org下载地址：http://www.torproject.org/dist/vidalia-bundles/vidalia-bundle-0.2.1.25-0.2.7.exe更新日期：2010-4-10一.准备软件:1.FireFox浏览器点击跳转下载2. 高度 匿名软件:Tor点击下载vidalia-bundle-0.2.1.25-0.2.7.exe 需要用迅雷下载3.FireFox 扩展:FoxyProxy Standard点击跳转安装二.安装软件1.先安装FireFox,安装过程略2. 安装Tor,如图所示:只需选择安装Vidalia和Tor.安装运http://www.w3dev.cn/article/20110414/kill-china-firewall.aspx
成了first party cookie和third party cookie，即第一方Cookie和第三方Cookie，所谓的第三方Cookie是指在Frame或者Iframe 中嵌套页面的Cookie。举例来 说，ABC公司购买了我们的信通宝产品，并在其公司网站http://www.abc.com/上加上了信通宝的链接脚本(www.xtb.com/test.js)，这个脚本在abc公司的网站上加上一个IFrame ，此Iframe 的内容为xtb.com上的某个页面如(www.xtb.com/List.aspx?cid=1234)，而这个List.aspx页面需要在读写cookie以便记录访客的http://www.w3dev.cn/article/20110218/IE6-iframe-frameset-can-not-read-cookie.aspx
今天在修改网上下载的新浪编辑器的一些功能时候，发现iframe 编辑在IE下如果重新设置图片的长或者宽，会出现图片等比缩小或者放大的问题。 起因：由于iframe 编辑器中，如果Firefox插入flash对象或者embed标签，不会显示在iframe 编辑器内，即使设置了embed标签的或者宽，也不会占用位置，这样在Firefox下就无法查看视屏动画文件占用的位置了，比较方便。 后面参考了ewebeditor的动画插入功能，不直接插入embed标签，而是使用一张空白的图片代替，给空白图片设置背景图片为动画的logo图片。在获取代码的时候将视屏图片替换为embed标签。 但是在修改视屏替代http://www.w3dev.cn/article/20101026/2912.aspx
e中鼠标事件在父页的坐标位置br获取iframe 中鼠标事件在父页的坐标位置br获取iframe 中鼠标事件在父页的坐标位置br获取iframe 中鼠标事件在父页的坐标位置scripttype="text/javascript"document.onclick=function(e){if(parent.ifX===false){alert('父页未初始化完毕，请稍后！');returnfalse;}//判断父页是否初始化了iframe 的绝对位置e=e||event;alert('x:'+(e.clientX+parent.ifX)//当前的位置加上iframe 在父页的绝对位置就是相对父页的坐标了http://www.w3dev.cn/article/20100714/2718.aspx
首页 上一页 [1] [2] 下一页 尾页 1/2页，每页显示30条，共40条相关记录
