iFrame src更改事件检测?

假设我无法控制iframe中的内容,是否有任何方法可以通过父页面检测到src的变化? 某种onload可能?

我最后的手段是做一个1秒的间隔testing,如果iframe src是一样的,但做这个hacky解决scheme会吸。

如果有帮助,我正在使用jQuery库。

您可能想要使用onLoad事件,如下例所示:

 <iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe> 

只要iframe中的位置发生变化,警报就会popup。 它适用于所有的现代浏览器,但可能不适用于一些非常老的浏览器,如IE5和早期的Opera。 ( 来源 )

如果iframe在父级的相同域中显示页面,则可以使用contentWindow.location访问该位置,如下例所示:

 <iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe> 
 $('#iframeid').load(function(){ alert('frame has (re)loaded'); }); 

如果你没有控制页面,并希望观察某种变化,那么现代的方法是使用MutationObserver

使用它的一个例子,监视一个iframesrc属性的改变

 new MutationObserver(function(mutations) { mutations.some(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'src') { console.log(mutation); console.log('Old src: ', mutation.oldValue); console.log('New src: ', mutation.target.src); return true; } return false; }); }).observe(document.body, { attributes: true, attributeFilter: ['src'], attributeOldValue: true, characterData: false, characterDataOldValue: false, childList: false, subtree: true }); setTimeout(function() { document.getElementsByTagName('iframe')[0].src = 'http://jsfiddle.net/'; }, 3000); 
 <iframe src="http://www.google.com"></iframe> 

这是在Commerce SagePay和Commerce Paypoint Drupal模块中使用的方法,它基本上比较document.location.href和旧值,方法是首先加载自己的iframe,然后加载外部的iframe。

所以基本上这个想法是加载空白页作为占位符与自己的JS代码和隐藏的forms。 然后,父母的JS代码将提交隐藏窗体,其#action指向外部iframe。 一旦redirect/提交发生,仍然在该页面上运行的JS代码可以跟踪你的document.location.href值的变化。

以下是在iframe中使用的示例JS:

 ;(function($) { Drupal.behaviors.commercePayPointIFrame = { attach: function (context, settings) { if (top.location != location) { $('html').hide(); top.location.href = document.location.href; } } } })(jQuery); 

这里是用于父页面的JS:

 ;(function($) { /** * Automatically submit the hidden form that points to the iframe. */ Drupal.behaviors.commercePayPoint = { attach: function (context, settings) { $('div.payment-redirect-form form', context).submit(); $('div.payment-redirect-form #edit-submit', context).hide(); $('div.payment-redirect-form .checkout-help', context).hide(); } } })(jQuery); 

然后,在临时的空白着陆页中,您需要包含将redirect到外部页面的表单。

iframe始终保留父页面,您应该使用它来检测您在iframe中的哪个页面:

Html代码:

 <iframe id="iframe" frameborder="0" scrolling="no" onload="resizeIframe(this)" width="100%" src="www.google.com"></iframe> 

JS:

  function resizeIframe(obj) { alert(obj.contentWindow.location.pathname); }