iframe 高度超出屏幕滚动条在父页面

2024-11-10

iframe子元素相对于父页面滚动条固定(iframe无滚动条，iframe固定高度有滚动条，两种情况)

一.当iframe自适应高度,无滚动条时候: 例如这样: //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { var scrollheight = parseInt($(parent.window).scrollTop()); console.log(parseInt($(parent.window).scrollTop())) if (scrollheight >= 300) { $("#qn-quc

iframe子页面控制父页面滚动高度，直接蹦到父页面开头

zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带单位,否则不认识,设置为0: window.top.document.documentElement.scrollTop = "100"; window.top.document.body.scrollTop = "100" // 不能带px 写两个,不同浏览器设置方式

IOS webview iframe 宽度超出屏幕解决方案

IOS 真机webview中,iframe 却不能很好地适应屏幕大小,总是超出屏幕尺寸,需要左右滚动才能看到完整页面. <div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;"> <iframe src="http://www.baidu.com" frameborder="0" height="100%&q

设置iframe高度自适应屏幕高度

写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接上代码吧 <%--iframe页面内容--%> <div class="page-content" style=""> <iframe id="iframe_0" src="login.jsp" wi

[JavaScript] iframe更改了src后，父页面history.back只能后退iframe而不能使自己后退解决办法

浏览器的机制如此,在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航. 有一种解决方案是不要修改iframe.src,而是删除旧iframe元素,新建一个iframe元素并替换它,这样不会产生history. 直接createElement,替换原来的iframe.

iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug

这是想要的效果: 样式设置是iframe外面的宽度为100%,iframe的宽度为父元素的90%,高度为宽度除以1.6,固定比例, 正常显示就是上面的样子,但是,问题出现在iphone特定手机特定版本的safari浏览器上,在它上面会出现: 这样的情况.检查了一下,发现原因了: 在iframe里面的页面没加载出来之前,iframe的宽和高是正常的,当里面的页面加载完了之后,宽度就会发生变化,当然, 高度也相应改变.父页面中显示出来的iframe宽和高其实是子页面的真实宽高!也就是说子页面的宽高

JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数

//页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }); //每500毫秒运行一次 window.setInterval("getH()", 500); //获取页面的高度,并传给父页面的元素 function getSubPageH() { var parentWorkDiv = $("#workDiv", parent

Iframe父页面与子页面之间的相互调用

iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT

iframe子页面获取父页面元素和window对象

项目中发现要在iframe的弹框中获取父页面中的元素,我们可以按照如下代码操作:$(window.parent.document).find('selector').attr('XXX') 如果我们需要获取父页面的window对象,我们可以使用如下代码操作:window.parent.location.hash 如果我们获取的是最顶层的页面,那么我么可以通过window.top来实现:

js-关于iframe:从子页面给父页面的控件赋值方法

项目中我们经会用到iframe,可能还会把iframe里的数值赋值给父页面空间. 接下来我们来说说有关于iframe赋值给父页面的方法. 1.子页面iframe给父页面的控件赋值方法. parent.document.getElementById("user").value = "wwwww"; //子窗口赋值父窗口方法一 parent.document.form1.shoulu.value="123"'; //子窗口赋值父窗口方法二 2.父页面

JavaScript:父页面与Iframe页面方法互调

父页面调用Iframe页面中的函数以上是父页面中定义的iframe,注意添加name属性在父页面中调用mapFrame的ShowMyLocation方法 Iframe页面调用父页面的方法直接在Iframe内的页面通过window.parent.FuncName();调用即可其中FuncName为方法名称

判断图片加载完成，自适应iframe高度

在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在android.ios4及以下,会失效(这个可以使用iscroll.js来解决,).最后改为iframe来显示文章内容.这里涉及到子页面和父页面的通信问题,不清楚可以看js之iframe子页面与父页面通信. 我在子页面获取到父页面传递过来的文章内容时,使用innerHTML将内容放入div中.代码如下: <di

iframe高度宽度自适应（转）

http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应完全跨域的iframe高度自适应同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度. 但跨域的情况则不允许对子页面或父页面的文档进行访问(返回und

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

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

跨子域的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 12 13 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>1.html</title> <script type="

iframe父页面获取子页面的高度

最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() { var h=$(document).height(); var ifHeight = $(window.top.document).find(".XX").css({ height:h }); }); window.top:是获取子页面所有body以上的元素. window.parent()是获取子页面body的上一级父元素.

iframe交互（一）父页面自动高度

//父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFrameResize()"> <script> function IFrameResize() { //alert(this.document.body.scrollHeight); //弹出当前页面的高度 var obj = parent.document.getElementById

iphone在iframe页面的宽度不受父页面影响，避免撑开页面

工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会. <div style="width: 100%; height: 300px; overflow-x: hidden; overflow: scroll; -webkit-overflow-scrolling: touch;"> <iframe src="contract.

jquery操作iframe的方法：父页面和子页面相互操作的方法

今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互传值,相互调用更自函数这些功能,这里我用一个简单的例子来介绍一下这些方法. a.html <script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/j

iframe父页面与子页面赋值

最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值父页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head&

iframe 高度超出屏幕 滚动条在父页面

热门专题

iframe 高度超出屏幕滚动条在父页面