【问题标题】:How to recognize an Ajax update in a 3rd party iframe如何识别第 3 方 iframe 中的 Ajax 更新
【发布时间】:2012-09-29 11:52:25
【问题描述】:

当页面加载时,它包含一个第 3 方 iframe(阅读:文件上传器)。我选择一个文件,单击“开始上传”按钮,上传完成后,我会收到“谢谢 - 上传完成”消息。

  • 没有 Ajax 响应(据我所知)。

  • 第 3 方确实允许我指定消息。我还可以在该消息中添加 ...。

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

提前致谢。

【问题讨论】:

  • 据我所知,同源策略不允许访问第 3 方 iframe 内容。
  • 你拥有 iframe 中的代码吗?
  • @ReyiNamir - 不。这就是我所说的第 3 方。

标签: javascript ajax jquery brightcove


【解决方案1】:

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

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

  1. 阅读第三方文档,看看他们是否支持触发任何js消息或事件
  2. 看看第三方系统是否提供了除 iframe 之外的其他方式来实现相同的功能。

脚本标签?

关于您可以添加的消息,您是否测试过是否可以向该消息添加任何 HTML 标记?这不太可能,但如果是这样,您可以添加自己的脚本标签以与您的框架进行通信,以触发您自己的功能(即`window.iframeSuccess`)并告诉您事件已经发生......


以下代码仅在双方都属于同一域(外框和 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(或其他一些唯一的用户信息)时才真正可行。如果您别无选择,这几乎是最后的后备方案。

【讨论】:

  • 谢谢@pebbl 是的,据我所知,我可以将脚本标签添加到 HTML 响应中。为了清楚起见,iframeSuccess() 函数将在我的“父”页面代码中,并且 iframe 将能够访问它,对吗?我问是因为我尝试了一个隐藏在 HTML 响应中(在 iframe 中)的简单输入,而 $_POST 没有看到该输入。提前感谢您的帮助。
  • 好吧,这不是一个好兆头,是不是“错误:访问属性 'iframeSuccess' 的权限被拒绝”(来自 FireBug)。
  • 反过来呢?我可以给我的上传完整消息 id="iframe-upload-success" 然后从父母那里收听吗?
  • 抱歉,是的,当然,如果您不拥有该域,则相反的操作也不起作用-您将再次遇到跨域策略阻止您。我将编辑我的答案。
  • 嘿@Pebbl。再次感谢。很高兴知道/理解任何一种方式。我会查看你的更新(上图),然后告诉你我是怎么做到的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-08-03
  • 1970-01-01
  • 2013-05-04
  • 2011-04-26
  • 1970-01-01
  • 2012-01-31
  • 2012-06-28
相关资源
最近更新 更多