【问题标题】:A piece of javascript in footer.php wordpress does work on PC but not on mobilefooter.php wordpress 中的一段 javascript 可以在 PC 上运行,但不能在移动设备上运行
【发布时间】:2017-01-17 21:12:49
【问题描述】:

我的 wordpress 网站上的 footer.php 中有以下代码

var myForm = document.getElementById("questionnaire");
if (myForm) {
  myForm.onsubmit = function() {
var questionDiv = document.getElementById('question-div');
var busyDiv = document.getElementById('busy');
var resultDiv = document.getElementById('result-div');
var resultList = document.getElementById('result-list');
var xhr = new XMLHttpRequest();
var url = "https://script.google.com/macros/s/xxxxx/exec";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onload = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    var result = response.result;
    for (var i in result) {
      var e = result[i];
      if (e) {
        var li = document.createElement('li');
        if (e.url) {
          var a = document.createElement('a');
          a.href = e.url;
          a.textContent = e.name;
          li.appendChild(a);
        } else {
          li.textContent = e.name;
        }
        resultList.appendChild(li);
      }
    }
    busyDiv.hidden = true;
    resultDiv.hidden = false;
  }
}

var form = document.getElementById('questionnaire');
var formData = new FormData(form);
var fields = ['name','email','yob','gender','xxx','yyyy'];
var params = [];
for (var i in fields) {
  var field = fields[i];
  params.push(field + "=" + formData.get(field));
}
xhr.send(params.join('&'));

questionDiv.hidden=true;
busyDiv.hidden=false;


return false;
  };
}
</script>

这让我可以编写和引用谷歌表格中的数据

现在这一切都可以在 PC 上运行,但它会在移动网站上显示 404 not found 错误,并且网站本身预设为移动响应。

有人可以帮忙吗?

【问题讨论】:

  • 页面本身是 404 吗?如果是这样,它与页脚中的 Javascript 无关。 AJAX 查询在移动设备或桌面设备上的行为也不同,这似乎很不寻常。
  • 您需要在 fiddle 中对其进行测试,以了解它是否是该脚本或您网页中的其他任何内容导致移动浏览器出现问题。转到此小提琴链接并通过粘贴#questionnaire 表单元素然后检查结果来测试代码:jsfiddle.net/h9pxkucr
  • @dave: 所以页面没问题,然后 id 输入一些数据并点击提交。然后页面刷新成 404...
  • 你认为是主题问题吗?我会对此进行更多研究。并将在 jsfiddle 上进行测试,谢谢!!

标签: javascript php html css wordpress


【解决方案1】:

您的表单 html 是什么样的?我怀疑您的移动浏览器正在尝试通过标准非 AJAX 方式提交表单,因此将浏览器定向到表单的“操作”属性中的 url。尝试以下方法来停止这种默认行为

var myForm = document.getElementById("questionnaire");
if (myForm) {
  myForm.onsubmit = function(evt) {
    evt.preventDefault();

【讨论】:

  • 嘿,我认为你是对的。电脑上的 html 和手机上的 html 不同——手机上的 html 包含所有的数据输入。添加此代码会阻止移动设备上的页面进入 404。但是一旦我添加了此代码。移动页面在提交时保持原样....
  • 该页面应该运行代码并从谷歌表格加载一些数据,但它在点击提交之前和之后保持不变
  • 网站是 www.fintrez.com 你可以通过电话查看然后你会看到...
猜你喜欢
  • 2018-03-04
  • 1970-01-01
  • 1970-01-01
  • 2017-05-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多