js和vue方法的相互呼叫(iframe父子頁面的方法相互呼叫)。
阿新 • • 發佈:2020-10-22
專案是前後端不分離的,模板引擎使用的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