iframe 内容加载后触发 js 函数

Posted 2023-05-09

【中文标题】iframe 内容加载后触发 js 函数

【英文标题】：Triggerring js function after iframe content loads

【发布时间】：2015-04-06 08:39:22

【问题描述】：

我正在从外部站点（Twitter 提要）加载 iframe，并希望使用 JS 更改 css 样式。

JS代码为：

$(".twitter-timeline").contents().find(".p-name").css("font-size","16px");
);

问题是我似乎无法在 iframe 的内容加载后执行此操作。我尝试使用以下方法打开该功能：

$('iframe.twitter-timeline').load(function()

或

$('#twitter-widget-0').load(function()

但它们似乎在 iframe 完成加载之前触发。当我刷新页面时，样式会按预期应用。但是，如果我清除缓存并再次重新测试，除非我刷新，否则它将无法工作。

如果我使用

window.setTimeout(function()

给它 3 秒左右，它有时会起作用，这取决于互联网速度，所以我不想使用它。

【参考方案1】：

<iframe id='myframe' src='http://url/doit.php' onload="onLoadHandler();"></iframe>

<script type="text/javascript">
function onLoadHandler() 
    $(".twitter-timeline").contents().find(".p-name").css("font-size","16px");

</script>

为 iframe 设置 onload 处理程序，然后在函数内运行您的代码。

【讨论】：

谢谢，我应该提到 twitter 的做法是他们从 js 代码中写入 iframe 代码，所以据我所知，我无法添加任何内容。

在您设置加载功能时，iframe 是否可能不存在？您可以尝试将其注销console.log($('iframe.twitter-timeline').length > 0); 如果它不存在，则可能您的负载处理程序未设置。你可能需要在 Twitter 代码运行后运行它。

【参考方案2】：

抱歉，在另一个线程中找到了答案，效果很好： Styling the new twitter widget (embedded timeline)

我使用 jquery.waituntilexists.js https://gist.github.com/buu700/4200601