iframe 父子頁面方法調用


在寫代碼的時候經常會用到將一個網頁嵌入到另一個網頁中,w3c也規定了一個標簽<iframe>,這個標簽本身就支持跨域,而且所有的瀏覽器都支持

iframe具有以下屬性:

1、frameborder 設為1代表顯示周圍邊框,設置為0不顯示周圍邊框

2、height 設置iframe的高度

3、width 設置iframe的寬度

4、longdesc 屬性值為URL 規定一個頁面,該頁面包含了有關 iframe 的較長描述

5、marginheight 定義 iframe 的頂部和底部的邊距

6、marginwidth 定義 iframe 的左側和右側的邊距

7、name 規定 iframe 的名稱

8、sandbox 啟用一系列對 <iframe> 中內容的額外限制。

9、scrolling 設置為 yes 代表顯示滾動條,設置為no代表不顯示滾動條,設置為auto 代表自動

10、seamless 屬性值也是 seamless 規定 <iframe> 看上去像是包含文檔的一部分

11、src 規定在 iframe 中顯示的文檔的 URL

12、srcdoc 規定在 <iframe> 中顯示的頁面的 HTML 內容

那么在設置好了之后如果在父頁面中想要調用子頁面的方法,或者在子頁面中調用父頁面的方法怎么辦呢??這個問題網上也很多介紹

父頁面

<!DOCTYPE html>
<html >
<head>
    <title>Parent Page</title>
        <script language="javascript" type="text/javascript">
            function parenttest() {
                alert("這是父頁面的方法!");
            }
            function btnClick() {
                document.getElementById("childframe").contentWindow.childtest();
            }
    </script>
</head>
<body>
   <div style="margin:auto;">
       <h1>This is the Parent Page.</h1>
       <input type="button" value="調用子頁面的方法"  onclick="btnClick()"/> 
    </div>
    <div style="margin:auto;">
       <iframe style="width:300px; height:300px;" id="childframe" src="son.html"></iframe>
    </div>
</body>
</html>

子頁面

<!DOCTYPE html>
<html >
<head>
    <title>Child Page</title>
    <script language="javascript" type="text/javascript">
      function childtest() {
          alert("這是子頁面的方法!");
      }
      function btnClick() {
          window.parent.parenttest();
      }
    </script>
</head>
<body>
   <div style="margin:auto;">
       <h1>This is the Child Page.</h1>
       <input type="button" value="調用父頁面的方法" onclick="btnClick()"/> 
    </div>
</body>
</html>

這樣就可以實現子頁面與父頁面方法的相互調用,擁有這個方法在處理起來非常的方便。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM