因為sem推廣總是提出一些讓人吐血的需求，類似於用A鏈接訪問B鏈接的內容，pc跟無線又要區分不同頁面，區域的不同又要顯示的內容不同等等，哎呀媽媽喂，凈瞎折騰。
這一次的需求是打開A鏈接，mobile顯示B鏈接的內容，pc顯示C鏈接的內容，因為訪問鏈接不能變。因此我首先想到的就是用iframe了。
本文的前提是iframe同域，即不存在跨域情況，頁面沒考慮IE兼容
A.html模板大概就是下面醬紫啦：
{if $flag eq 'mobile'} <p class="title" style="display: none;">手機端title</p> <iframe id="iframe" name="iframe" frameborder="0" style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe> {else} <p class="title" style="display: none;">pc端title</p> <iframe id="iframe" name="iframe" frameborder="0" style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe> {/if}
pc跟手機判斷我就直接用php那邊判斷了。為什么要這么做呢？我是這么想的：
如果我用js來判斷手機跟無線，無非就是隱藏誰顯示誰的問題（用這種方法的話，如果pc、手機端頁面內容多的話，那么不管顯示哪個頁面，他都會把所有資源加載出來的，就算你display為none），或者是js里面判斷客戶端，然后再動態添加src，動態引入資源。哎呀，就是因為后面還要添加很多標簽，所以就不用js來寫了，省了麻煩。
然后用js動態添加src。如果你的src不需要攜帶參數的話，那么可以直接把src寫在iframe里面。但是我這里因為要有在線咨詢的功能，而且需要在url后面添加渠道追蹤才能進行咨詢（比如www.u-can.cn?channel=27），所以這個src是會變化的，還是貼代碼比較清楚，原諒我不是很會表達，哈哈
A.html頁面：
window.onload=function(){ document.title=document.querySelector('.title').innerHTML; var ifr=document.querySelector('#iframe'); var local_search=window.location.search;//這里可以獲取到url?及后面的參數 if(document.querySelector('#iframe')){ ifr.style.height=window.innerHeight+'px'; var src1='';
if(navigator.userAgent.match(/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/)){
//mobile顯示b.html頁面內容 src1='/b.html'; }else{
//pc顯示c.html頁面內容 src1='/c.html'; } if(local_search){ // 如果url存在?參數，則把參數傳入，例如b.html?參數 ifr.src=src1+local_search; }else{ ifr.src=src1; }
} }
當你以為一切萬事大吉的時候，一堆問題又來了。我這個嵌套的頁面有fixed定位的元素，比如有底部固定懸浮按鈕呀，右側懸浮咨詢按鈕呀，在安卓機、谷歌模擬下都正常顯示，但是平常NBHH的蘋果家族竟然有問題了。需求方反映說她的iphone6頁面下底部按鈕被甩在了文章底部。靠，返工重做。
百度一番后，決定把嵌套在頁面內的fixed元素全部搬到父頁面，模板改成這樣：
<!--A.html-->
<body> {if $flag eq 'mobile'} <p class="title" style="display: none;">mobile title</p> <iframe id="iframe" name="iframe" frameborder="0" style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe> <a class="scroll-top" href="javascript:;">返回頂部</a> <div class="f_nav_box"> <div class="main footer_nav"> <a id="one" class="one" href="javascript:;"><img src="images/images/icon_02.jpg" alt="" >按鈕1</a> <a class="three" >按鈕2</a> <a id="four" class="four" href="javascript:;" >按鈕3</a> </div> </div> {else} <p class="title" style="display: none;">pc title</p> <iframe id="iframe" name="iframe" frameborder="0" style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe> {/if} </body>
好了，現在蘋果機上能正常顯示fixed定位的按鈕了。不過還有兩個問題需要解決：
- 當頁面滑動高度大於500時，顯示返回頂部按鈕，點擊返回頂部按鈕，頁面回到最頂部
- 頁面底部固定按鈕1點擊跳轉錨點1，按鈕3跳轉錨點2，並讓某一個復選框被勾選（這里就模擬下調用b頁面的fun1函數）
解決1：
A.html頁面：
window.onload=function(){ var ifr=document.querySelector('#iframe'); var to_top=document.querySelector('.scroll-top');
//操作iframe還是需要在它加載完后再進行吧，不然直接操作會返回undefined的 ifr.onload=function(){ var ifr_window=window.frames["iframe"]||ifr.contentWindow;//獲取iframe窗口 var ifr_doc= ifr_window.document;//獲取iframe文檔---console控制台打印輸出顯示<html></html>所有內容 // ifr_doc.querySelector('.floattel').style.display='none';//這樣就可以操作iframe里面的元素了 // ifr_doc.querySelector('.footer').style.paddingBottom='6em';
//給iframe頁面添加滾動事件 ifr_window.onscroll=function(){ var scrollTop = ifr_doc.body.scrollTop;//獲取文檔內滾動條滾動高度 if(!to_top) return; if(scrollTop>500){//當高度大於500時，顯示返回頂部按鈕，否則隱藏 to_top.style.display='block'; }else{ to_top.style.display='none'; } }; if(to_top){
//給返回頂部按鈕注冊點擊事件--iframe窗體scrollTo(0,0)
to_top.onclick=function(){
ifr.contentWindow.scrollTo(0,0);
}; } } }
備注：后面測試后才發現安卓及可以正常顯示返回頂部按鈕，但是蘋果機下不行。查了一些資料后了解到ios系統不能再在iframe框架頁面觸發onscroll事件，額。。。所以后面就不用這種寫法了
解決2：
A.html頁面：
window.onload=function(){ var ifr=document.querySelector('#iframe'); var one=document.querySelector('#one'); var four=document.querySelector('#four'); ifr.onload=function(){ var ifr_window=window.frames["iframe"]||ifr.contentWindow; var ifr_doc= ifr_window.document; one.onclick=function(){ ifr_window.location.hash='#sdly';//跳到b頁面指定錨點 ifr_window.location = ifr_window.location; }; four.onclick=function(){ ifr_window.location.hash='#order';//跳到b頁面指定錨點 ifr_window.location = ifr_window.location;
ifr_window.fun1();//調用b頁面定義的fun1方法 }; } }
B.html頁面：
<html> <head> <title></title> </head> <body> <div id="sdly">點擊父窗口按鈕1跳到這里</div> <div id="order">點擊父窗口按鈕3跳到這里並執行fun1()</div> <script> function fun1(){ alert('我是點擊父窗口的按鈕觸發的！'); } </script> </body> </html>
說明：
ifr_window.location.hash='#order';//跳到b頁面指定錨點 ifr_window.location = ifr_window.location;
在錨點跳轉這里我在hash后面還添加了ifr_window.location = ifr_window.location;這串代碼。因為測試的時候發現谷歌只響應第一次錨點跳轉，后面再次點擊就沒有反應了，所以加上這一句后就正常了。
最后這里記錄下window.location的相關知識點：
window.location 對象所包含的屬性
| 屬性 | 描述 |
|---|---|
| hash | 從井號 (#) 開始的 URL（錨） |
| host | 主機名和當前 URL 的端口號 |
| hostname | 當前 URL 的主機名 |
| href | 完整的 URL |
| pathname | 當前 URL 的路徑部分 |
| port | 當前 URL 的端口號 |
| protocol | 當前 URL 的協議 |
| search | 從問號 (?) 開始的 URL（查詢部分） |