原生js與iframe一些事

時間 2019-11-10

原文原文鏈接

由於sem推廣老是提出一些讓人吐血的需求，相似於用A連接訪問B連接的內容，pc跟無線又要區分不一樣頁面，區域的不一樣又要顯示的內容不一樣等等，哎呀媽媽喂，淨瞎折騰。javascript

這一次的需求是打開A連接，mobile顯示B連接的內容，pc顯示C連接的內容，由於訪問連接不能變。所以我首先想到的就是用iframe了。php

本文的前提是iframe同域，即不存在跨域狀況，頁面沒考慮IE兼容html

A.html模板大概就是下面醬紫啦：java

{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那邊判斷了。爲何要這麼作呢？我是這麼想的：ios

若是我用js來判斷手機跟無線，無非就是隱藏誰顯示誰的問題（用這種方法的話，若是pc、手機端頁面內容多的話，那麼無論顯示哪一個頁面，他都會把全部資源加載出來的，就算你display爲none），或者是js裏面判斷客戶端，而後再動態添加src，動態引入資源。哎呀，就是由於後面還要添加不少標籤，因此就不用js來寫了，省了麻煩。跨域

而後用js動態添加src。若是你的src不須要攜帶參數的話，那麼能夠直接把src寫在iframe裏面。可是我這裏由於要有在線諮詢的功能，並且須要在url後面添加渠道追蹤才能進行諮詢（好比www.u-can.cn?channel=27），因此這個src是會變化的，仍是貼代碼比較清楚，原諒我不是很會表達，哈哈框架

A.html頁面：iphone

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（查詢部分）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。