草庐IT

关于 javascript:Firefox 没有为动态嵌套 iframe 触发 onload

codeneng 2023-03-28 原文

Firefox not firing onload for dynamic nested iframe

我有以下代码可以在 Chrome 和 MS Edge 上运行，但不能在 Firefox 上运行。

Parent.html 有这个脚本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>

var ifr1 = document.createElement('iframe');

ifr1.onload = function() {
    alert("iframe 1 loaded") //fires on all browsers
    script = ifr1.contentWindow.document.createElement('script');
    script.src = 'PATH/TO/script.js';
    script.onload = function() {
        alert("script 1 onload") //fires on all browsers
    };
    ifr1.contentWindow.document.body.appendChild(script);
};
document.body.appendChild(ifr1);


</body>
</html>

它创建一个 iframe 并在该 iframe 中加载 script.js。

这里是 script.js，它和上面做同样的事情 -

1
2
3
4
5
6
7
8
9
10
11
12
var ifr2 = document.createElement('iframe');

ifr2.onload = function() {
    alert("iframe 2 loaded") //doesn't fire on Firefox
    script = ifr2.contentWindow.document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js';
    script.onload = function() {
        alert("script 2 onload")
    };
    ifr2.contentWindow.document.body.appendChild(script);
};
document.body.appendChild(ifr2);

它在 Parent.html 创建的 iframe ifr1 中创建另一个 iframe ifr2。

现在，Chrome 和 Edge 会正确显示所有警报，但 Firefox 不会为 ifr1 中加载的 ifr2 触发 onload 事件(甚至 IE 也会为 ifr2 触发 onload)。知道为什么吗？

  • devtools 控制台上有任何消息吗？

一种解决方法是创建一个简单的 html 页面 - 甚至只是 <html><head></head><body></body></html>(甚至可能更少).. 让我们称之为 empty.html

如果您现在将 Parent.html 更改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>

var ifr1 = document.createElement('iframe');

ifr1.onload = function() {
    alert("iframe 1 loaded") //fires on all browsers
    script = ifr1.contentWindow.document.createElement('script');
    script.src = 'PATH/TO/script.js';
    script.onload = function() {
        alert("script 1 onload") //fires on all browsers
    };
    ifr1.contentWindow.document.body.appendChild(script);
};
ifr1.src = 'empty.html'; // add this code *******
document.body.appendChild(ifr1);


</body>
</html>

然后它按预期工作

不知道为什么 firefox 会这样做——这可能是因为没有 src 属性，iframe\\ 的位置是 about:blank——但是为什么第一个有效而不是第二个有效是一个谜我

edit: 嗯，它做了一次然后又停止了！！

好的，真的很奇怪 - 如果你添加 ifr1.src = 'empty.html' 它可以工作......如果你在 script.js 中复制它，它会再次中断

不确定我是否已经很好地回答了你，但至少我给了你一个有效的工具：p

虽然这是一种不好的做法，并且在 chrome 中已被弃用(它会在控制台中显示警告。
在附加脚本标记之前添加这一行为我解决了这个问题：

iframe.contentWindow.document.write('<html><head></head><body></body></html>');

看来 firefox 需要它来初始化 iframe 并运行 javascript...

IMO 这是 Firefox 中的一个错误，因为 Firefox 不会按照您期望的方式在 iframe 中执行 load 事件。 Mozilla 的开发人员可能不同意。这一切都取决于您对"加载"应该意味着什么的定义，它比您想象的要复杂。

在任何情况下，真正的问题是何时知道访问 ifr2.contentWindow 是安全的，而使用 ifr2.onload 的全部意义在于您可以确定何时存在 ifr2.contentWindow。

但是请注意，contentWindow 和文档会在 document.body.appendChild(ifr2) 执行时立即创建，因此如果您将 appendChild() 调用移至当前代码上方并删除 onload 函数，它将按预期工作。

或者您可以将 onload 函数更改为其他函数并在 appendChild() 之后直接执行它，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ifr2 = document.createElement('iframe');
function loadit() {
    console.log("iframe 2 loaded")
    script = ifr2.contentWindow.document.createElement('script');
    script.src = '...';
    script.onload = function() {
        console.log("script 2 onload")
    };
    ifr2.contentWindow.document.body.appendChild(script);
};

// add the iframe to the document
document.body.appendChild(ifr2);

// now execute your script stuff:
loadit()

这应该适用于所有(现代)浏览器。

有为javascriptspanclassbrhtmliframe

有关关于 javascript:Firefox 没有为动态嵌套 iframe 触发 onload的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  3. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  4. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  5. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  6. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  7. Ruby——嵌套类和子类是一回事吗？ - 2

    下面例子中的Nested和Child有什么区别？是否只是同一事物的不同语法？classParentclassNested...endendclassChild 最佳答案 不，它们是不同的。嵌套:Computer之外的“Processor”类只能作为Computer::Processor访问。嵌套为内部类(namespace)提供上下文。对于ruby​​解释器Computer和Computer::Processor只是两个独立的类。classComputerclassProcessor#Tocreateanobjectforthisc

  8. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  9. ruby-on-rails - 使用回形针的嵌套形式 - 2

    我有一个名为posts的模型，它有很多附件。附件模型使用回形针。我制作了一个用于创建附件的独立模型，效果很好，这是此处说明的View(https://github.com/thoughtbot/paperclip):@attachment,:html=>{:multipart=>true}do|form|%>posts中的嵌套表单如下所示:prohibitedthispostfrombeingsaved:@attachment,:html=>{:multipart=>true}do|at_form|%>附件记录已创建，但它是空的。文件未上传。同时，帖子已成功创建...有什么想法吗？

  10. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

随机推荐