前端技术之iframe2

一、之前在 前端技术之iframe1 这篇的时候有一个获取iframe加载页面的元素并动态赋值的一个例子，但是有几种情况是无法实现的：

1.你要操作的这个元素是设置了类似position:fixed；top：72%；

2.他的大盒子设置了例如：

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}
           

3.你的这个元素所在的页面是iframe加载的

这种情况下，你是无法拿到window.onscroll里document.scorllTop的值的（除非解除overflow这个css），因为它不会触发这个，那么为啥要解决这个问题？是因为在ipone端的h5页面，滑动时设置在侧边位置的元素并没有跟随滑动，而是你在拖动屏幕的时候它消失，放开时又出现，给人的体验很不好。

那么怎么解决呢？下面附上完整的代码：

4.js核心部分：index页面

var iframe = document.getElementById("external-frame");
		if (iframe.attachEvent){
			iframe.attachEvent("onload", function(){
				alert("11");
			});
			} else {
			iframe.onload = function(){
				var doc=$(window.frames["external-frame"].document);
				var item=doc.find("#bbb");
				
			    doc.on('touchmove',function(e) {
					item.css({"top":"30%"})
			    });
			    
			};
		} 	
		var hg = window.screen.height;
		$(".iframe-content").css("height",hg+"px");	
           

html部分：

<div class="iframe-content">
			<iframe src="main.html" name="external-frame"  width="100%" height="100%" frame id="external-frame" class="iphone"
			></iframe>
		</div>
		
		<div style="width: 50px;height: 50px;background: blue;position: fixed;top: 200px;left: 0;"></div>
		
           

css部分：

.iphone{
				-webkit-overflow-scrolling:touch;
				overflow:auto;
				height:100%;
				position: fixed;
    			margin-top: 0px ;
			}
           

另一个main.html页面：

html部分：

<div class="content" style="height: 556px;">
		<div style="width: 100%;height: 2000px;background: #CCCCCC;">
			<button class="btn">点我</button>
		</div>
		<div class="aaa" id="bbb"></div>
	</div>
           

css部分：

.content{
				-webkit-overflow-scrolling: touch;
    			overflow-y: scroll;
			}
			.aaa{    
			    position: fixed;
			    z-index: 997;
			    width: 125px;
			    height: 30px;
			    left: 63%;
			    top: 30%;
			    display: block;
			    background: red;
			}
			html,body{
			    height: 100%;
			    overflow: auto;
			   -webkit-overflow-scrolling: touch;
			}
           

效果图：