Question

页面加载时，它包含第三方iframe（读取：文件上传器）。我选择一个文件，点击“开始上传”按钮，上传完成后，我会收到“谢谢 - 上传完成”消息。

没有Ajax响应（我知道）。
第三方允许我指定消息。我也可以在那条消息中加上......

上传完成后，我需要用upload_file_id更新隐藏的输入，我从一开始就知道了。如果“上传完成”消息/时刻/事件我想要捕获/使用什么。但页面的动态性对我来说有些新鲜，我可以使用一些支持。

提前致谢。

Answer 1

不幸的是，除非与代码位于同一主机/域中，否则您将无法访问iframe的任何有用属性。这是所有当前/有价值的浏览器实现的安全功能 - 称为同源或跨域策略。

您检测第三方iframe中的更改的唯一选项是第三方代码是否支持向周围帧发送消息。有几种方法可以做到这一点，但他们需要支持它。如果他们不这样做，你就无能为力。如果是我，我会检查以下内容：

阅读第三方文档，了解它们是否支持触发任何js消息或事件
查看第三方系统是否提供了另一种方式，除了iframe，以实现相同的能力。

脚本标签？

以下代码仅适用于 - 如果双方属于同一个域（外部框架和iframe）。否则它将被同源策略阻止。

<script>
if( window && window.parent && window.parent.iframeSuccess ){
  window.parent.iframeSuccess();
}
</script>

相反，您可以实现以下精确设计用于帧之间通信的以下内容。这是一个更现代的解决方案，因此不适用于旧浏览器 - 看看你能在这里阅读的支持：

What browsers support the window.postMessage call now?

如何使用window.postMessage的示例 - 首先是外框中的代码：

function messageListener(event){
  /// make sure we only get messages from where we expect
  if ( event.origin != "http://the-domain-we-expect-from.com" ){ return; }
  /// here you can do what you want depending on the message you get
  alert(event.data);
}

/// define for nearly every modern browser
if (window.addEventListener){
  addEventListener("message", messageListener, false);
} else {
  /// fallback for internet explorer
  attachEvent("onmessage", messageListener);
}

然后代码放在iframe中：

if( window && window.parent && window.parent.postMessage ){
  window.parent.postMessage('success', 
     'http://the-domain-we-are-sending-to.com');
}

有关详细信息，请参阅此处：

https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

图片代码？

如果它们阻止脚本标记，则可能允许图像标记。如果是这种情况，你可以使用一个稍微复杂的选项，即嵌入一个报告回服务器端脚本的图像，然后可以在数据库中标记该事件......

<img src="http://mysite.com/image-that-is-actually-a-script.php?id=user-id" />

然而，要让你的javascript注意到这个事件，你需要某种轮询系统，不断从你的js （通过ajax或websockets）检查你的服务器端数据库 - 你需要能够唯一地识别双方（您的和第三方）的用户，其ID为某种类型。因此，只有当第三方系统允许您将用户ID （或其他一些唯一用户信息）插入到向用户显示的消息中时，才能使用此方法。如果您没有其他选择，这几乎是最后一个后备。

如何识别第三方iframe中的Ajax更新

1 个答案:

脚本标签？

图片代码？