JavaScript 跨頁面呼叫控制文件的方法

本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

最基本與常見的做法就是 AJAX ，但那屬於等事件回傳再繼續該行為的操作，所以，

如果要先等新請求完成後才能繼續的動作該如何解決？

1. 同頁面的情境，下遮罩阻擋控制，等回應後繼續（AJAX常見解決辦法）
2. 不同頁面情境，因Dom已經重載，除了 JSONP 做法就是 Server Side 包 Session or Cookie ，在頁面更新過程中更新畫面/資料

針對第二點，如要完成前後端盡量分離，就會是 JavaScript 的工！

使用 opener 這個方法，去取得如其名另開啟新子頁面的父頁面Dom來操作。

舉例

一個超商取貨的購物頁，消費者操作到選擇超商的部分時，消費者會需要連到超商據點選擇頁（因內容屬超商維護，會外連到超商），而好的使用體驗會是選擇完後回到原頁面並且看到畫面資料更新。

Ａ：賣場頁
Ｂ：超商據點選擇頁

解法： Ａ頁面已定義好JavaScript方法，然後由Ａ頁面form submit後新開視窗的Ｂ頁面再執行完成後透過 opener 方法呼叫Ａ頁面定義好的方法

JSONP 的方法雖然類似，但是核心也會是使用 opener 來完成跨頁面資料連動的做法。

參考

1. How to call a Javascript function from other page?
2. Window.open and pass parameters by post method
3. How do I capture response of form.submit