Ajax/jquery 结果不显示在 iframe 中。改为在新页面中显示答案

【问题标题】：Ajax/jquery result does not display in iframe. Displays in new page insteadAjax/jquery 结果不显示在 iframe 中。改为在新页面中显示
【发布时间】：2017-11-28 20:52:47
【问题描述】：

我已经搜索了 stackoverflow 和其他论坛，但我无法解决所描述的问题。下面。

问题在 IE 11 和 Firefox 10.0.2 中的表现方式相同。

我想向网站 (http://mirgo2.co.uk/bridgesolver) 提交 (POST) 表单，并在页面上显示结果（已处理手牌的桥牌桌）。

javascript如下：

<script>
// -------------Create the form
  var formData = new FormData();
  var content = '[Board "1"]' + '\n' +
               '[Dealer "N"]' + '\n' +
               '[Vulnerable "EW"]' + '\n' +
               '[Deal "N:K97.K43.6432.QT8 Q52.765.KJ.76543 AT8.AQ2.9875.AK9 J643.JT98.AQT.J2"]'; // the body of the new file...
  var blob = new Blob([content], { type: "text/plain"});

  formData.append( "fileToUpload", blob, "somename.pbn" )

  formData.append("event",0); 

// ------------Submit the form
      $.ajax({
          url: 'http://mirgo2.co.uk/bridgesolver/upload_file.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#theTarget").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });
</script>

目标是一个iframe，在页面上定义如下：

<iframe id="theTarget" name="theTarget" ></iframe>

结果接近但不完全。

如 Firefox F12 所示，表单按预期提交网络展示
提交返回成功，如显示的 formData 警报所示
但是 iframe 在警报后面的页面上显示为空
相反，在点击成功警报后，请求的数据单独显示。带有 iframe 的页面消失，而板显示在同一浏览器窗口中。

我不明白为什么会发生这种情况，也找不到其他方法来实现结果。

欢迎所有建议。

布拉姆·范·奥斯特豪特

PS：cmets 提醒了我以下可能相关的内容。发出请求的页面从域 bram.van-oosterhout.org 返回该请求被发送到域 mirgo2.co.uk。而浏览器窗口中的成功显示来源于dds.bridgewebs.com

使用 iframe 的建议是针对结果的域不是返回包含 ajax 请求的页面的域这一事实。

我也应该在上面说过，当服务器 mirgo2.co.uk 返回错误消息时，该机制起作用。当文件名不正确时（例如：somename.txt），服务器 (mirgo2.co.uk) 会返回一条错误消息，该消息会显示在页面上的正确位置。但是，当 dds.bridgewebs.com 返回正确的结果时，我的页面将被 dds.bridgewebs.com 提供的结果所取代。

27/6/2017 11:20 更新：我想我找到了问题的原因。

mirgo2.co.uk 返回的代码是：

<script language="JavaScript" type="text/JavaScript">
var filename="http://mirgo2.co.uk/bridgesolver/uploads/5951a6d4a9d308.60317801.pbn";
</script>
<body>
<script language="JavaScript" type="text/JavaScript">
location.replace("http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=" + filename);</script>
</body>

当它被放置在 iframe 中时，它会被执行并且 location.replace 将替换整个页面。

这解释了症状。

我对 javascript API 不是很熟悉。有什么建议我如何将上述内容转换为所需的 returndata="http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=" + filename)？

【问题讨论】：

Firefox 10!! 为什么？
不要使用async: false。
你为什么首先使用 iframe 而不是 div？
Firefox 10 运行在无法升级的非常旧的 Linux 平台上
iframe 在我使用的示例中被建议。我认为这是必要的，因为我提取的结果与请求页面所在的域位于不同的域中

标签： javascript jquery html ajax iframe

【解决方案1】：

我已经通过蛮力解决了这个问题。实现在以下情况下有效：

  success: function (returndata) {
      $("#theTarget").html(returndata);

替换为：

  success: function (returndata) {
    var re = new RegExp(
      '\"(http://mirgo2.co.uk/bridgesolver/uploads/.*?.pbn)\"' +
      '[\\s\\S]*?' +
      '\"(http://dds.bridgewebs.com/.*?=)\"'   
       );
    var myResult = returndata.match( re );

    document.getElementById('theTarget').setAttribute( 'src',
                                 myResult[2] + myResult[1] );

正则表达式提取返回内容中的两个url。然后 iframe 显示 url 请求的数据。

上面讨论了导致我这样做的观察结果。

我强烈推荐 IE 11 F12 调试工具。尤其是网络标签和子标签。

感谢收听。

【讨论】：

【解决方案2】：

我也有兴趣使用相同的基础网站获得双重虚拟解决方案。就我而言，我想发出一个 HTTP GET 请求来获取解决方案。作为一个典型的测试，我通过了一个请求，即 North 持有所有黑桃，East 持有所有红心，South 持有所有方块，West 持有所有梅花。没有漏洞。

curl "https://dds.bridgewebs.com/cgi-bin/bsol2/ddummy?request=m&dealstr=N:AKQJT98765432...%20.AKQJT98765432..%20..AKQJT98765432.%20...AKQJT98765432&vul=None"

网站以 json 字符串响应

{"sess":{"sockref":"(null)","ddtricks":"0d0d00d0d000d0d00d0d"},"contractsNS":"NS:NS 7S","contractsEW":"EW:NS 7S","scoreNS":"NS 1510","scoreEW":"EW -1510","vul":"0"}

“ddtricks”项目被编码为 5x4 十六进制数字矩阵。前五个十六进制数字是北的花样计数（NT、黑桃、红心、方块、梅花），然后是南、东、西。方向和西装总是按顺序固定的。但是，请求字符串可以将任何方向编码为 dealstr ("N:...") 的第一个字符。

【讨论】：