2

我是事物开发方面的完整初学者，非常感谢任何帮助。

我有以下代码在调整浏览器大小时刷新整个页面：

$(window).bind('resize',function(){
     window.location.href = window.location.href; 
});

但是，我希望刷新针对具有唯一 id 的特定 iframe 而不是整个页面。

再次，提前感谢您的帮助。

4

2 回答 2

5

采用：

$(window).resize(function(){
    document.getElementById('FrameID').contentDocument.location.reload(true);
});

如果您有多个 iFrame，请考虑使用类而不是 ID。

于 2013-01-03T12:23:49.493 回答
1

我在使用 Facebook 社交小部件时遇到问题，我希望这能解决它。您的代码很有帮助（一个好的开始）。

也就是说，它没有用。

如果我找到一个解决方案，我会发布一个解决方案。Facebook 真的需要更新他们的小部件。响应式网站（移动设备）确实存在问题。考虑到他们创建了 React 代码，它确实写得不是很好。

jQuery 似乎是一个更好的解决方案，因为我没有要定位的 id）但问题在 iframe 中更深层次。

// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
  $('.fb iframe')[0].contentDocument.location.reload(true);
});

//--- other ways to reload iframes---

//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);

//reload all iFrames
$('iframe').each(function() {
  this.contentWindow.location.reload(true);
});
 
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));

更新...我发现这两个关于这个主题的写得很好的页面。希望它有效。

更新

上面的代码很好，但他们还没有准备好摇滚。为他们的网站显示的示例，我几乎可以正常工作，但我的代码中仍然存在错误。

所以...

这完全是作弊，但我正在查看源代码并从 Facebook 打开 iframe 位置，它确实有效（似乎允许）。到目前为止，它似乎也可以与其他配置文件一起使用（只要您先授予权限）。

我只是硬编码了 iframe 与使用他们的 JavaScript 代码。通过这种方式，它的工作速度也提高了 1000 倍/更快，并且已经响应。我花了这么多时间试图修复 Facebook 的代码真是太疯狂了。在 iframe 中使用直接 URL 链接加载速度更快（geezzz）。

这是我用于最终 URL 的示例（我清理了不需要的参数。

https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width= 500

同样，请记住，要使其正常工作，您需要先在 Facebook 上创建一个社交框，以便您可以授予权限。我试图用我的个人用户名来做，因为我以前从未创建过一个，所以它不起作用。同样，这是理论，但这是有道理的。我的实际站点正在使用另一个客户端，我还测试了其他客户端。它似乎工作正常。

没有承诺它将在实时站点上运行。Facbook 可能会阻止不通过脚本使用它的用户，但我们会看到。我猜 Facebook 可能会在代码中使用脚本来检查位置源，所以这种方式可能会随着时间的推移而失败（还不知道）。此外，我可能缺少 Facebook 从我没有注意到（或删除）的脚本中生成的所需密钥。我清理它时很小心，我不想包含超出需要的内容。我们会看到。

无论如何，请通过源代码尝试自己的测试。我需要处理其他更重要的事情，这很有效，而且似乎是一个简单而有效的解决方案。如果它失败了，我以后会有更多的时间。客户不会再知道，它更快并且似乎工作得更好。

<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>

另一个更新。

它似乎正在工作，但我仍然需要向宽度参数中的 URL 发送刷新。此外，请注意社交小部件的最大宽度为 500 像素（因此，如果您需要更大的宽度，除非您在 CSS 中使用某种变换，否则它不会更大）。

这是最终的代码。

有趣的是，我又回到了原点。我正在使用我们上面讨论过的一些代码以及我想出并编写的一些新代码。

:)

同样值得注意的是，我注意到 StackOverflow 控制台给了我一个错误。

请忽略它。该错误与 StackOverflow 不喜欢的调用 Facebook 的 iframe 引用有关。据我所知，没有错误。

如果我错了，请告诉我。

// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
    $('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>

于 2018-02-26T22:42:57.570 回答