iFrame 加载 JavaScript 事件

Posted 2023-05-09

【中文标题】iFrame 加载 JavaScript 事件

【英文标题】：iFrame onload JavaScript event

【发布时间】：2015-05-27 20:10:41

【问题描述】：

我有一个 iFrame，我想在加载后发送一个 javascript 命令。 我当前的代码如下所示：

<iframe src="http://www.test.tld/" onload="__doPostBack('ctl00$ctl00$bLogout','')">

但是使用这段代码，命令不会被执行。我必须改变什么才能让它工作？ 只需要支持 Chrome 和 Firefox。

【问题讨论】：

iframe 是否加载 test.tld 页面？

是的，没有问题

你怎么知道“命令没有执行”？

因为我还处于登录状态。如果我点击网站上的“注销”按钮将触发我退出的命令。

err，你“登录”了吗？试试：<iframe src="http://www.w3schools.com" onload="alert('test')" />

【参考方案1】：

使用JavaScript的iFrame的.onload函数：

<iframe id="my_iframe" src="http://www.test.tld/">
    <script type="text/javascript">
        document.getElementById('my_iframe').onload = function() 
            __doPostBack('ctl00$ctl00$bLogout','');
        
    </script>
    <!--OTHER STUFF-->
</iframe>

【讨论】：

也许你可以看看这个subinsb.com/jquery-to-javascript)的原生javascript版本

这似乎也不起作用：

我将代码更改为 javascript。我希望这会奏效，我自己还没有测试过。 @Peleke

谢谢，但这也无济于事。也许不可能！？网站上注销按钮的代码是 (Logout)

在liveweave.com/9ngqqd 上看看这个我在这里工作（尝试从 iframe 更改 url 以加载一些大页面）

【参考方案2】：

document.querySelector("iframe").addEventListener( "load", function(e) 

    this.style.backgroundColor = "red";
    alert(this.nodeName);

    console.log(e.target);

 );

<iframe src="example.com" ></iframe>

【讨论】：

这种添加“加载”侦听器的方式与他们设置 iframe.onload = a function 的其他答案有什么区别？

@rasen58，他们都做同样的事情。 addEventListener 的优点是可以将more than one event listener 添加到加载事件中。请参阅此答案以获取更多详细信息。 ***.com/a/6348533/9695286

【参考方案3】：

您的代码是正确的。只需测试以确保它被调用 喜欢：

<script>
function doIt()
  alert("here i am!");
  __doPostBack('ctl00$ctl00$bLogout','')

</script>

<iframe onload="doIt()"></iframe>

【讨论】：

尝试：

确保加载到 iframe 中的 URL 允许加载，“检查 Chrome 开发工具中的输出以了解加载错误”。好像不允许加载一样，永远不会调用 onload 事件。当我运行此代码时，URL“sdsd.com”没有任何限制，也没有加载错误。试试看。

确保负载中的 L 是小写的，所以 "l" 而不是 "L" 。所以 onload="doIt()" 不是 onLoad="doIt()"

【参考方案4】：

更新

从 jQuery 3.0 开始，新语法只是 .on:

查看answer here 和代码：

$('iframe').on('load', function() 
    // do stuff 
);