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

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

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

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

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

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

舉例

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

A:賣場頁
B:超商據點選擇頁

解法: A頁面已定義好JavaScript方法,然後由A頁面form submit後新開視窗的B頁面再執行完成後透過 opener 方法呼叫A頁面定義好的方法

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

Facebook 功能:

Share: