我需要在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加载之前进行,因此回调没有返回任何数据。
首先,使用函数名称xssRequest听起来好像您正在尝试跨站点请求-如果这是正确的,则您将无法读取iframe的内容。
另一方面,如果iframe的URL在您的域中,则可以访问正文,但是我发现如果我使用超时来删除iframe,则回调可以正常工作:
// possibly excessive use of jQuery - but I've got a live working example in production
$('#myUniqueID').load(function () {
if (typeof callback == 'function') {
callback($('body', this.contentWindow.document).html());
}
setTimeout(function () {$('#frameId').remove();}, 50);
});
我正在使用jQuery,令人惊讶的是,这似乎在我刚刚测试并加载了一个沉重的页面时就加载了,直到我看到iframe加载,我才收到警告几秒钟:
$('#the_iframe').load(function(){
alert('loaded!');
});
因此,如果您不想使用jQuery,请查看它们的源代码,看看该函数在iframe DOM元素中的行为是否不同,我将在以后感兴趣的地方亲自查看并在此处发布。我也只在最新的Chrome中测试过。
iframe的innerHTML为空白,因为您的iframe标记不会围绕父文档中的任何内容。为了从iframe的src属性所引用的页面获取内容,您需要访问iframe的contentDocument属性。但是,如果src来自其他域,则将引发异常。这是一项安全功能,可防止您在其他人的页面上执行任意JavaScript,这将创建跨站点脚本漏洞。这是一些示例代码,说明了我在说什么:
<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"></script>
<h1>Parent</h1>
<script type="text/javascript">
function on_load(iframe) {
try {
// Displays the first 50 chars in the innerHTML of the
// body of the page that the iframe is showing.
// EDIT 2012-04-17: for wider support, fallback to contentWindow.document
var doc = iframe.contentDocument || iframe.contentWindow.document;
alert(doc.body.innerHTML.substring(0, 50));
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
<iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe>
为了进一步说明该示例,请尝试将其用作iframe的内容:
<h1>Child</h1>
<a href="http://www.google.com/">Google</a>
<p>Use the preceeding link to change the src of the iframe
to see what happens when the src domain is different from
that of the parent page</p>
在将Word文档和pdf等文档流式传输到iframe并找到一个效果很好的解决方案的情况下,我不得不这样做。关键是onreadystatechanged
在iframe上处理事件。
可以说您的框架名称是“ myIframe”。首先在代码启动的某个位置(我在iframe之后的任何位置进行内联)添加以下内容以注册事件处理程序:
document.getElementById('myIframe').onreadystatechange = MyIframeReadyStateChanged;
我无法在iframe上使用onreadystatechage属性,我不记得为什么,但是该应用程序必须在IE 7和Safari 3中运行,因此这可能是一个因素。
这是如何获取完整状态的示例:
function MyIframeReadyStateChanged()
{
if(document.getElementById('myIframe').readyState == 'complete')
{
// Do your complete stuff here.
}
}
当i框架内容完全加载到IE时,我想隐藏正在等待的Spinner div,我实际上尝试了Stackoverflow.Com中提到的每个解决方案,但没有按我希望的方式工作。
然后我有了一个想法,当第i个框架内容完全加载时,可能会触发$(Window)加载事件。正是这样。所以,我写了这个小脚本,像魔术一样工作:
$(window).load(function () {
//alert("Done window ready ");
var lblWait = document.getElementById("lblWait");
if (lblWait != null ) {
lblWait.style.visibility = "false";
document.getElementById("divWait").style.display = "none";
}
});
希望这可以帮助。
我和你有类似的问题。我所做的是使用了一种称为jQuery的东西。然后,您在javascript代码中执行的操作是:
$(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page.
$("#myIframeId").load(function(){
callback($("#myIframeId").html());
$("#myIframeId").remove();
});
});
似乎在删除iFrame之前,您先从中获取html。现在,我确实看到了一个问题:p
希望这可以帮助 :)。
我的项目中有一个类似的代码,可以正常工作。使我的代码适应您的功能,可能有以下解决方案:
function xssRequest(url, callback)
{
var iFrameObj = document.createElement('IFRAME');
iFrameObj.id = 'myUniqueID';
document.body.appendChild(iFrameObj);
iFrameObj.src = url;
$(iFrameObj).load(function()
{
callback(window['myUniqueID'].document.body.innerHTML);
document.body.removeChild(iFrameObj);
});
}
也许您有一个空的innerHTML,因为(一个或两个原因):1.您应该将它用于body元素2.您已从页面DOM中删除了iframe
我认为加载事件是正确的。不正确的是您用来从iframe内容dom中检索内容的方法。
您需要的是在iframe中加载的页面的html,而不是iframe对象的html。
您要做的是使用来访问内容文档iFrameObj.contentDocument
。如果它位于当前页面的同一域中,则将返回加载到iframe中的页面的dom。
在删除iframe之前,我会先整理内容。
我已经在Firefox和Opera中测试过。
然后,我认为您可以使用$(childDom).html()
或来检索数据$(childDom).find('some selector') ...
过去,我遇到了完全相同的问题,而解决该问题的唯一方法是将回调添加到iframe页面中。当然,仅当您可以控制iframe内容时,该方法才有效。
使用onload
attrbute将解决您的问题。
这是一个例子。
function a() {
alert("Your iframe has been loaded");
}
<iframe src="https://stackoverflow.com" onload="a()"></iframe>
这是你想要的吗?
单击此处了解更多信息。
文章标签:dom , events , iframe , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!