AMP (Accelerated Mobile Pages, 加速移動網頁) 相關的改造工作我們已經進行了幾個月，有相當一部分網站流量和廣告收入轉到AMP上面來了，應該來說還是很見成效的。不過有個技術問題一直沒有解決，就是一些包含表單的頁面，用Post方式提交後沒有反應，不像對應的Web頁面那樣跳轉到指定頁面。
Drupal網站中的站内搜索就是使用的Post方式提交搜索表單，我們就改為自己新建一個以Get方式提交的表單來替換，這樣是可以跳轉到指定搜索結果頁面的，算是一種可行的替代辦法。
但像聯系我們或者頁面留言這一類的表單，内容比較複雜，就沒法改為用Get方式提交了，這個問題就一直拖到現在，好幾位同事摸索一陣子也沒有結果。
上周再和同事花了一些時間，專門一起來查看、調試，一點點排查，有查閱了各種資料（包括AMP Project官方網站文檔，以及Google搜索到的問答，例如：AMP form submitting with post裡面的一個完整例子）最後終于是試驗出來可以跳轉了，真是費盡千辛萬苦！關鍵點如下：
- 首先是需要把普通表單替換為符合AMP-Form的格式，特别是Post到的網址需要是action-xhr，這一步我們先已經實現了；
- 後來發現在amp-form官方文檔中有專門講Redirect的部分我們忽略了，需要頁面Header中使用AMP-Redirect-To來跳轉；
- 但我們按照這個在頁面中加入相應的Header語句，也無法實現跳轉，再在Google中搜索“amp form post redirect”等關鍵詞，找到了幾篇别人的問答，把示例代碼複制出來，做了一個包含表單的html文件和一個進行處理的php文件，這樣可以實現跳轉，再精簡其中語句，最後終于找到必須保留的幾行（見本文底部）；
- 再來修改Drupal網站中includes/common.inc中的drupal_goto函數，不同的theme對應不同的跳轉辦法，終于可以在Drupal中實現需要的跳轉效果了；
- 不過直接修改Drupal的核心文件不合适，再在自定義模塊中使用hook_drupal_goto_alter鈎子函數，才算是完美實現了amp頁面的表單post提交跳轉！
後來也實現了百度MIP的表單提交正确跳轉，這個在後面的博文《使用drupal_goto_alter來替換百度MIP表單Post提交後跳轉網址》中再記錄。
$server_name = $_SERVER['SERVER_NAME'];
header("AMP-Access-Control-Allow-Source-Origin: https://$server_name");//這句不能少，允許跳轉來源域名
header("AMP-Redirect-To: $url?amp");//這句不能少，指明跳轉到的網址
header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin,Access-Control-Allow-Origin");//這句不能少，允許一些控制和跳轉辦法
header("location: $url");//同事發現https://jamesqi/node/333?amp這樣的别名跳轉出現問題，增加這句後解決
echo json_encode(array(""));//這句不能少，必須返回一個json數據，原因不明
die();//這句也不能少，原因不明
我在上面代碼中做了點注釋，其實有些語句或者機制我也沒有完全明白，反正是這樣就可以實現。
2017-10-31補充，實際實施的時候還可能遇到各種問題：
如果開啟了Honeypot并且默認啟用了一個陷阱url的表單項（來引誘填表機器人填寫以鑒别和屏蔽垃圾信息），在Web版本上看不到這個，但在amp版本中會看到标題為Leave this field blank的輸入框，需要修改css來不顯示，具體是../sites/all/themes/amptheme/ampsubtheme_example/css/amp-custom-styles.css中添加：
.url-textfield {
display:none;
}
如果amp驗證還有報錯The attribute 'action' may not appear in tag 'FORM [method=POST]'，那就是表單替換這一步還沒有實現，需要修改page.tpl.php，添加正則表達式替換：
$pattern = "/<form class=\"([^\"]*)\" action=\"([^\"]*)\" method=\"post\" /";
$replace = "<form class=\"$1\" action-xhr=\"$2\" method=\"post\" target=\"_top\" ";
$output = preg_replace($pattern,$replace,$output);
$pattern = "/<form action=\"([^\"]*)\" method=\"post\" /";
$replace = "<form action-xhr=\"$1\" method=\"post\" target=\"_top\" ";
$output = preg_replace($pattern,$replace,$output);
另外，如果調試contact聯系功能的表單時遇到“系統設定 1 小時 内最多發送 5 條消息。請稍後再試。”，可以修改數據庫中的variable表，将contact_threshold_limit從默認的5改為20或者其它你希望的數字，也可以用drush vset contact_threshold_limit xx來設置。
contact表單提交後跳轉到首頁，但匿名用戶沒有顯示“你的信息已被送出。”（管理員是顯示的，我在amp版本的page.tpl.php中也打開了print $messages），暫未查明原因（可能是可能導緻顯示給其它匿名用戶了）。
评论