请教JS高手,怎么让Iframe中的页面自动滚屏

JavaScript015

请教JS高手,怎么让Iframe中的页面自动滚屏,第1张

在父页面直接滚子页面的屏也是可以的。

frames["iframe"].document.body.scrollTop

你一直给这个对象累加数字也是滚屏的效果了

main.htm:

<html>

<head>

<meta http-equiv='Content-Type' content='text/html charset=gb2312' />

<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' />

<title>iframe自适应加载的页面高度</title>

</head>

<body>

<div><iframe src="child.htm"></iframe></div>

</body>

</html>

child.htm:

<html>

<head>

<meta http-equiv='Content-Type' content='text/html charset=gb2312' />

<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' />

<title>iframe 自适应其加载的网页(多浏览器兼容)</title>

<script type="text/javascript">

<!--

function iframeAutoFit()

{

try

{

if(window!=parent)

{

var a = parent.document.getElementsByTagName("IFRAME")

for(var i=0i<a.lengthi++) //author:meizz

{

if(a[i].contentWindow==window)

{

var h1=0, h2=0, d=document, dd=d.documentElement

a[i].parentNode.style.height = a[i].offsetHeight +"px"

a[i].style.height = "10px"

if(dd &&dd.scrollHeight) h1=dd.scrollHeight

if(d.body) h2=d.body.scrollHeight

var h=Math.max(h1, h2)

if(document.all) {h += 4}

if(window.opera) {h += 1}

a[i].style.height = a[i].parentNode.style.height = h +"px"

}

}

}

}

catch (ex){}

}

if(window.attachEvent)

{

window.attachEvent("onload", iframeAutoFit)

//window.attachEvent("onresize", iframeAutoFit)

}

else if(window.addEventListener)

{

window.addEventListener('load', iframeAutoFit, false)

//window.addEventListener('resize', iframeAutoFit, false)

}

//-->

</script>

</head>

<body>

<table border="1" width="200" style="height: 400pxbackground-color: yellow">

<tr>

<td>iframe 自适应其加载的网页(多浏览器兼容:IE5.5+、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等,支持XHTML)</td>

</tr>

</table>

</body>

</html>

很多人反应在IE7里使用它会死机,那是因为在自适应高度时触发了 window.onresize 事件,而这个事件又去调用这个调整 <iframe>高度的函数,产生了死循环调用。

这段代码里我对 iframe 所在的父元素也设定了一个高度,以防止iframe 高度变化时页面跳动的太厉害,在调用的时候可酌情使用这个设置。

您好!具体代码如下,兼容各浏览器,其中scrollTop 为当前页面到顶部的距离,document.body.offsetHeight为整个页面的高度,document.documentElement.clientHeight为当前屏幕的高度,有不明白的可以问我,希望我的回答能帮到您!

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title></title>

<style>

body{margin:0height:2000px}

div{height:500pxwidth:500pxbackground:#f00margin:0 auto}

</style>

<script>

window.onscroll=function(){

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

if(scrollTop>=document.body.offsetHeight-document.documentElement.clientHeight)

{

document.getElementById("div1").style.display="none"

alert("去看看是不是DIV不见了")

}

}

</script>

</head>

<body>

<div id="div1">

this is a div

</div>

</body>

</html>

先说下实现的思路:

1 页面布局,一堆等待滚动选择的列表 先实现一个竖排的列表,触屏能滚动,也就是说先不考虑选择的问题 写一个固定高度的盒子 把一堆待选择的列表放里面 触屏滚动大概就实现了 简单代码:

<div style="height:300px" id=“box”>

<li style="height:100px"></li>

<li style="height:100px"></li>

...

</div>

2: 滚动选择  第一步监控触屏滚动 onmousedown onmousemove onmouseup 监控鼠标触屏在box里的上下移动距离  也就是说滚动屏幕了多远  然后box scrollTop定位的减去移动的距离也就可以算出当前box距离顶部的距离 例如 mousemove -300px 原来的scrollTop为0 那现在0-(-300)=300px 那么每个li 100px 然后定位当前选中的 li标签 300/100 = 3 当前为选中了 列表中的第三个

3 以上只是提供了一个简单的实现思路  下面是别人的案例你可以看下 大体上就是这种思路实现的

网页链接