假设我对iframe中的内容没有控制,是否有任何方法可以通过父页检测到src的变化?也许是某种onload ?
我的最后一招是做一个1秒间隔测试,如果iframe src与之前相同,但做这个hack解决方案会很糟糕。
我正在使用jQuery库,如果它有帮助。
假设我对iframe中的内容没有控制,是否有任何方法可以通过父页检测到src的变化?也许是某种onload ?
我的最后一招是做一个1秒间隔测试,如果iframe src与之前相同,但做这个hack解决方案会很糟糕。
我正在使用jQuery库,如果它有帮助。
当前回答
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);
}
其他回答
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);
}
从Jquery 3.0版本开始,你可能会得到一个错误
TypeError: url。indexOf不是一个函数
哪些是可以通过做来轻松解决的
$('#iframe').on('load', function() {
alert('frame has (re)loaded ');
});
如果您无法控制页面,并希望观察某种变化,那么现代的方法是使用MutationObserver
它的使用示例,观察src属性在iframe中的变化
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>
3秒后输出
MutationRecord {oldValue: "http://www.google.com", attributeNamespace: null, attributeName: "src", nextSibling: null, previousSibling: null…}
Old src: http://www.google.com
New src: http://jsfiddle.net/
据jsFiddle
在这里张贴的答案是原来的问题,作为这个问题的副本关闭。
这是在Commerce SagePay和Commerce Paypoint Drupal模块中使用的方法,基本上是通过首先加载自己的iframe,然后加载外部iframe来比较document.location.href与旧值。
所以基本上这个想法是加载空白页作为一个占位符与它自己的JS代码和隐藏的表单。然后父JS代码将提交隐藏的表单,其中#action指向外部iframe。一旦重定向/提交发生,仍在该页上运行的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);
然后在临时空白登陆页,你需要包括将重定向到外部页面的表单。
基于JQuery < 3的答案
$('#iframeid').load(function(){
alert('frame has (re)loaded');
});
正如subharb所提到的,从JQuery 3.0开始,这需要更改为:
$('#iframe').on('load', function() {
alert('frame has (re)loaded ');
});
https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed