当前位置

AMP表单Post方式提交后不能跳转的问题及解决办法

James Qi 在 2017年9月19日 - 16:02 提交
内容摘要:AMP (Accelerated Mobile Pages, 加速移动网页) 相关的改造工作我们已经进行了几个月,有相当一部分网站流量和广告收入转到AMP上面来了,应该来说还是很见成效的。不过有个技术......

  AMP (Accelerated Mobile Pages, 加速移动网页) 相关的改造工作我们已经进行了几个月,有相当一部分网站流量和广告收入转到AMP上面来了,应该来说还是很见成效的。不过有个技术问题一直没有解决,就是一些包含表单的页面,用Post方式提交后没有反应,不像对应的Web页面那样跳转到指定页面。

  Drupal网站中的站内搜索就是使用的Post方式提交搜索表单,我们就改为自己新建一个以Get方式提交的表单来替换,这样是可以跳转到指定搜索结果页面的,算是一种可行的替代办法。

  但像联系我们或者页面留言这一类的表单,内容比较复杂,就没法改为用Get方式提交了,这个问题就一直拖到现在,好几位同事摸索一阵子也没有结果。

  上周再和同事花了一些时间,专门一起来查看、调试,一点点排查,最后终于是试验出来可以跳转了,真是费尽千辛万苦!关键点如下:

  • 首先是需要把普通表单替换为符合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");//这句不能少,允许一些控制和跳转办法
echo json_encode(array(""));//这句不能少,必须返回一个json数据,原因不明
die();//这句也不能少,原因不明

  我在上面代码中做了点注释,其实有些语句或者机制我也没有完全明白,反正是这样就可以实现。

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。
验证码
本问题用于测试您是否为人类访问者,避免自动垃圾发贴。
图形验证
键入显示在图片中的字符