Ajax/jquery 结果不显示在 iframe 中。改为在新页面中显示
Posted
技术标签:
【中文标题】Ajax/jquery 结果不显示在 iframe 中。改为在新页面中显示【英文标题】：Ajax/jquery result does not display in iframe. Displays in new page instead 【发布时间】：2017-11-28 20:52:47 【问题描述】：我已经搜索了 *** 和其他论坛，但我无法解决所描述的问题。下面。
问题在 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 在我使用的示例中被建议。我认为这是必要的，因为我提取的结果与请求页面所在的域位于不同的域中
【参考方案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:...") 的第一个字符。
【讨论】：
以上是关于Ajax/jquery 结果不显示在 iframe 中。改为在新页面中显示的主要内容，如果未能解决你的问题，请参考以下文章