2. 程式人生 > >iframe父子頁面相互呼叫的js方法

iframe父子頁面相互呼叫的js方法

阿新 • • 發佈：2019-01-05
當父頁面和子頁面都屬於同一個域下，那麼它們之間的js方法是可以相互呼叫的。在呼叫方法前指定function所屬物件即可，父頁面獲取iframe所屬物件方法為：iframe的name.window.方法名()，iframe頁面獲取父頁面所屬物件方法為：parent.方法名()。
但是這裡有一個非常重要的限制，由於瀏覽器基於安全考慮，是不允許js在不同域名間進行通訊，所以父子頁面必須屬於同一個域，即使是相同主域下的不同二級域也是不行的。
對於父子頁面完全屬於兩個不同的域名，那麼它們之間永遠無法直接進行通訊；如果父子頁面是屬於同一個主域下的不同二級域，則可以使用強制設定document.domain的方式來達到讓其互相通訊。document.domain預設值是window.location.host，可以js中設定為window.location.host的上一級域，但是不能為根域，例如：可以在頁面www.duankou.com設定document.domain為duankou.com，但是不能設定為other.duankou.com或com。
document.domain在一定程度上解決了不同二級域名頁面的跨域問題。需要注意的是，如果父頁面包含多個iframe且設定了document.domain，那麼要與其進行通訊的iframe也必須設定document.domain。
另外在chrome 18中，父子頁面屬於相同域名，當設定document.domain後，它們之間變的無法通訊了，其他瀏覽器正常。

父頁面（parent.html）：
  1. <!DOCTYPE html >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type"
     content="text/html; charset=utf-8" />  
  5. <title>parent</title>  
  6. </head>  
  7. <body>  
  8. <input type="button" value="call child" onclick="callChild()"/>  
  9. <iframe name="child" src="child.html" ></iframe>  
  10. <script>  
  11. function parentFunction() {  
  12.     alert('function in parent'
    );  
  13. }  
  14. function callChild() {  
  15.     //child 為iframe的name屬性值，不能為id，因為在FireFox下id不能獲取iframe物件
  16.     child.window.childFunction();  
  17. }  
  18. </script>  
  19. </body>  
  20. </html>  
子頁面（iframe頁面，child.html）：
  1. <!DOCTYPE html >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>child</title>  
  6. </head>  
  7. <body>  
  8. <input type="button" value="call parent" onclick="callParent()"/>  
  9. <script>  
  10. function childFunction() {  
  11.     alert('function in child');  
  12. }  
  13. function callParent() {  
  14.     parent.parentFunction();  
  15. }  
  16. </script>  
  17. </body>  
  18. </html>  

相關推薦

iframe父子頁面相互呼叫的js方法

當父頁面和子頁面都屬於同一個域下，那麼它們之間的js方法是可以相互呼叫的。在呼叫方法前指定function所屬物件即可，父頁面獲取iframe所屬物件方法為：iframe的name.window.方法名()，iframe頁面獲取父頁面所屬物件方法為：parent.方法名()。但是這裡有一個非常重要的限制，由

基於iframe父子頁面傳值的方法。

this laydate clas tex pan 部分 信息 參數 iframe 之前項目中用layer.js作為彈窗的框架，發現layer.js中大部分彈窗都是通過iframe模擬的。為此，在項目中遇到了不少坑。印象最深的就是父子頁面傳值的問題。後面經過一段時間的研究。

JavaScript 父子頁面相互呼叫總結

父子頁面相互呼叫是一個在開發中經常遇到的問題，但是沒有找到過比較全面的文章介紹。在此總結下來，供大家參考。 四種方式        一般情況下，我們可以使用iframe、window的open、showModalDialog、showModelessDialog方法這

js和vue方法的相互呼叫（iframe父子頁面的方法相互呼叫）。

專案是前後端不分離的，模板引擎使用的JSP。 但是使用了Vue+ElementUI，這裡列舉一些常用的呼叫方式，有時候可能。 在js裡呼叫vue方法 我們需要把方法註冊到vue物件之外的頁面，所以對與在methods中定義的方法，需要在mounted中註冊給window。之後我們可以在js裡直接呼叫， 在v

iframe頁面相互呼叫方法

本文首發我的簡書 最近的專案中嵌入了外部的iframe，想跨域呼叫自己頁面的方法，點選iframe中的返回按鈕，返回到父級的上一級頁面，因為是自己的專案是單頁應用，所以無法直接使用window.location.href，這個需求讓我頭疼了兩天（包括衍生出來的問題），解

iframe 父子頁面方法調用

ava 屬性 code tags col esc func 寬度 實現 在寫代碼的時候經常會用到將一個網頁嵌入到另一個網頁中，w3c也規定了一個標簽<iframe>，這個標簽本身就支持跨域，而且所有的瀏覽器都支持 iframe具有以下屬性： 1、frameb

jsp頁面載入時div中迴圈輸出ul，span標籤接收引數並呼叫js方法

<html lang="en"> <head> <script src="relation.js"></script> </head> <body> <div id="aaa"> <

jquery操作iframe的方法：父頁面和子頁面相互操作的方法

今天在弄jquery操作iframe中元素：先由iframe中的子頁面b.html給外面的父頁面a.html頁面傳值，再將a.html頁面計算機的值放到b.html頁面上，這裡就用到子頁面和父頁面相互傳值，相互呼叫更自函式這些功能，這裡我用一個簡單的例子來介紹一下這些方法。

JQuery 主頁面呼叫子頁面()中的JS方法，子頁面呼叫主頁面的JS方法

<!--主頁面中的JS程式碼--> <script type="text/javascript"> //呼叫子頁面的方法. var childWindow = $("#addFrame")[0].contentWindow; //表示獲取了嵌入在

iframe巢狀時父子頁面互相呼叫的問題

子頁面呼叫父頁面的方法：parent.父頁面方法名(); 父頁面呼叫子頁面的方法： var child=$("#testIframe")[0].contentWindow;             child.子頁面方法名(); 注：testIframe為iframe

iframe父子級相互調用

child parent 父子級相互調用 iframe 父級：parent.html調用孩子方法：fuji.window.functionName(); <!doctype html><html><head> <script type="text

iframe父子頁面通信

onload 毫秒 pan java size ber 註釋 設備 out 一、同域下父子頁面的通信 1.父頁面調用子iframe頁面 （1）通過iframe的Id獲取子頁面的dom，然後通過內置屬性contentWindow取得子窗口的window對象,此方法兼

android呼叫js方法

WebViewAcy給到 import android.content.Intent; import android.graphics.Bitmap; import android.net.http.SslError; import android.os.Build; im

Qt呼叫Windows Webbrowser控制元件，呼叫JS方法

說明： Qt版本為4.7.4    編譯工具為VS2008 一．需要包含的標頭檔案 #include"ExDisp.h" #include"comutil.h" #include"atlcomcli.h" #include "Mshtml.h" 庫檔名： comsup

c# 一般處理程式呼叫js方法

js：       1.回撥方法，在ashx檔案中進行回撥      <script>                                    function callback() {                     alert(“ok

android java 與 c++ 相互呼叫的方法

android java 與 c++ 相互呼叫的方法 最近在寫native部分的程式碼，需要c++和java相互呼叫。記得JK之前說過他弄了一個新的方法，在寫jni的時候會自由一點，我對了一下他的程式碼，根據我的場景寫了一個出來。在這裡給自己做一點筆記吧。 Android.mk

mui 實現父子頁面相互傳值

父頁面接收子頁面傳過來的引數： 如子頁面傳了一個aaa過來 window.addEventListener('updata', function(e){        var aaa= e.detail.aaa   &

iOS中OC呼叫js方法簡述（一）

從iOS7開始 蘋果公佈了JavaScriptCore.framework 它使得JS與OC的互動更加方便了。 下面我們就簡單瞭解一下這個框架 首先我匯入framework 方法如下： 點選Linked Frameworks and Libraries 的

node+ejs【封裝ejs模板中直接呼叫js方法】

封裝全域性函式 var myFunction = {}; /* * 字串擷取 * @str 擷取字串 * @start 開始擷取位置 * @end 結束擷取位置 */ myFu

Android中呼叫js方法及js中呼叫本地方法

Android中內建了WebKit模組，而該模組的Java層檢視類就是WebView，所有需要使用Web瀏覽器功能的Android都需要建立該檢視類物件顯示和處理請求的網路資源。目前WebKit支援Http、Https、Ftp和JavaScript請求。下面我們重點看一下如