前端技術之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;
			}
           

效果圖：