当有人点击图片时,我们使用jQuery thickbox动态显示iframe.在这个iframe中,我们使用galleria一个javascript库来显示多张图片.
问题似乎是$(document).ready在iframe似乎过早被解雇并且iframe内容甚至尚未加载,因此galleria代码未在DOM元素上正确应用. $(document).ready似乎使用iframe父就绪状态来决定iframe是否准备就绪.
如果我们在单独的函数中提取由文档就绪调用的函数,并在超过100毫秒后调用它.它有效,但我们不能利用慢速计算机生产机会.
$(document).ready(function() { setTimeout(ApplyGalleria, 100); });
我的问题:我们应该绑定哪个jQuery事件,以便在动态iframe准备就绪时能够执行我们的代码,而不仅仅是它的父级？
我需要在IFRAME加载完成后执行回调.我无法控制IFRAME中的内容,因此我无法从那里触发回调.
这个IFRAME是以编程方式创建的,我需要将其数据作为回调中的变量传递,并销毁iframe.
有任何想法吗？
编辑:
这就是我现在拥有的:
function xssRequest(url, callback)
{
var iFrameObj = document.createElement('IFRAME');
iFrameObj.src = url;
document.body.appendChild(iFrameObj);
$(iFrameObj).load(function()
{
document.body.removeChild(iFrameObj);
callback(iFrameObj.innerHTML);
});
}
在iFrame加载之前进行此回调,因此回调没有返回数据.
我有一个id ="myIframe"的iframe,这里我的代码加载它的内容:
$('#myIframe').attr("src", "my_url");
问题是有时加载时间太长,有时加载速度很快.所以我必须使用"setTimeout"函数:
setTimeout(function(){
if (//something shows iframe is loaded or has content)
{
//my code
}
else
{
$('#myIframe').attr("src",""); //stop loading content
}
},5000);
我想知道的是如何确定iFrame是否已加载或是否具有内容.使用iframe.contents().find()不起作用.我不能用iframe.load(function(){}).
我很惊讶地发现以下似乎不起作用,因为DOMContentLoaded事件不会触发(this.els是元素的对象).
this.els.stage_ifr.prop('src', 'templates/'+ee.globals.creating+'/item'+this.id);
this.els.stage_ifr[0].addEventListener('DOMContentLoaded', function() {
alert('loaded!');
}, false);
该页面加载到iframe中,但没有回调.onload但是,DOM级别为零.
this.els.stage_ifr[0].onload = function() { alert('loaded!'); }; //<-- fires
解决方法是在父页面中准备一个全局可访问的jQuery延迟对象,并通过从调用iframe的页面触发的DOM-ready事件来解决它,而不是从父级侦听DOM-ready.
Paraent页面:
dfd = new $.Deferred;
dfd.done(function() { alert("frame page's DOM is ready!"); });
框架页面:
$(function() { window.parent.dfd.resolve(); });
尽管如此,知道第一种方法是什么还是很好的...
我一直在尝试使用cypress.io测试条带结帐表单
如果有人设法让这个工作,请告诉我.我在这里找到了一个关于这个问题的帖子https://github.com/cypress-io/cypress/issues/136并基于此我想出了:
cy.get('iframe.stripe_checkout_app')
.wait(10000)
.then($iframe => {
const iframe = $iframe.contents()
const myInput0 = iframe.find('input:eq(0)')
const myInput1 = iframe.find('input:eq(1)')
const myInput2 = iframe.find('input:eq(2)')
const myButton = iframe.find('button')
cy
.wrap(myInput0)
.invoke('val', 4000056655665556)
.trigger('change')
cy
.wrap(myInput1)
.invoke('val', 112019)
.trigger('change')
cy
.wrap(myInput2)
.invoke('val', 424)
.trigger('change')
cy.wrap(myButton).click({ force: true })
})
但问题是条带形式仍然没有注册输入值.以下是http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8发生的一些小故事.基本上,表单不会注册更改输入触发器.
有谁知道如何使用cypress将数据输入到iframe中的表单中？
假设我想将load-event绑定到iframe:
var callback = function() {
//Loaded
};
$('iframe').one('load', callback);
这很好用,除了我不能确定iframe尚未加载.在这种情况下,load-event已经触发,我的函数永远不会运行.
如何检查iframe是否已加载？
var callback = function() {
//Loaded
};
if(iframe already loaded) {
callback();
} else {
$('iframe').one('load', callback);
}