1. 程式人生 > >js和vue方法的相互呼叫(iframe父子頁面的方法相互呼叫)。

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

專案是前後端不分離的,模板引擎使用的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,被呼叫的一方,需要註冊:

 

&n