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

意必固我_LRL發表於2020-10-22
JSVue

專案是前後端不分離的，模板引擎使用的JSP。

但是使用了Vue+ElementUI，這裡列舉一些常用的呼叫方式，有時候可能。

在js裡呼叫vue方法

我們需要把方法註冊到vue物件之外的頁面，所以對與在methods中定義的方法，需要在mounted中註冊給window。之後我們可以在js裡直接呼叫，

在vue裡呼叫js方法

直接使用window.方法名就可以呼叫

在主頁面中呼叫iframe子頁面的程式碼：

<!--主頁面中的JS程式碼-->
<script type="text/javascript">
//呼叫子頁面的方法.
var childWindow = $("#addFrame")[0].contentWindow; //表示獲取了嵌入在iframe中的子頁面的window物件。  []將JQuery物件轉成DOM物件，用DOM物件的contentWindow獲取子頁面window物件。
childWindow.subFunction();  //呼叫子頁面中的subFunction方法。
</script>
 
 
<!--子頁面中的JS程式碼-->
<script type="text/javascript">
//子頁面呼叫父頁面中的方法。
window.parent.parentFunction();  //parentFunction是父頁面中自定義的JS方法。
</script>

在iframe子頁面（vue環境一樣）中呼叫父頁面程式碼：

 子頁面：

 

 主頁面：

在一個iframe子頁面呼叫另一個iframe子頁面的方法，並且同為Vue環境

主頁面：

 

 子頁面1，呼叫的一方：

 

 

子頁面2，被呼叫的一方，需要註冊：

 

 

相關文章