在浏览器调整大小时刷新选定的 iframe

Posted 2023-02-22

技术标签:

【中文标题】在浏览器调整大小时刷新选定的 iframe【英文标题】：Refresh selected iframes on browser resize 【发布时间】：2012-12-17 19:28:02 【问题描述】：

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

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

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

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

再次感谢您的帮助。

【问题讨论】：

【参考方案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'));

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

How to make the Facebook Page Plugin fully responsive Making The Facebook Page Plugin Responsive

更新

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

所以……

这完全是作弊，但我正在查看源代码并从 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 从我没有注意到（或删除）的脚本中生成的所需密钥。我清理它时很小心，我不想包含超出需要的内容。我们会看到。

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

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

还有一个更新。

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

这是最终代码。

这一切都很有趣，我又回来了。我正在使用我们上面讨论过的一些代码以及我想出并编写的一些新代码。

另外值得注意的是，我注意到 *** 控制台给了我一个错误。

请忽略它。该错误与 *** 不喜欢的调用 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&sn-p-code-html lang-html prettyprint-override"><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"   allowtransparency="1" scrolling="no" frameborder="0"></iframe>





    
    
    





             
    
        【讨论】：
            

        
        
            
                
                如果您有新问题，您应该这样发布。将来人们可能会发现这很有帮助，因此可能值得自己提出一个问题并在下面给出答案。
                
              
                
            
        
    
    
        
        
            
                
                我确实更新了这个并展示了我的工作（我是如何到达那里的）。我正在学习，我非常感谢您的 cmets。我还在上面添加了更多信息。这部分是一个答案，也是一个评论和分享我在解决类似问题时学到的东西的旅程。我今天和之前花了几个小时在这上面。我认为这是一个让我分享的好地方，因为我想出了要做什么（即在开始的讨论中）。我认为我的 cmets 应该对其他人非常有用。
                
              
                
                        
            
        
    
    
        
        
            
                
                再次感谢您提供的链接和 cmets。我在学习。非常有用。【参考方案2】： 
                

    
    
用途：

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


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





             
    
        【讨论】：
            

        
        
            
                
                这正是我想要的。我将如何定位 2 个不同的 iframe。我有一个 id="refresh1" 和另一个 "refresh2" 的 iframe。我重复了代码“document.getElementById('FrameID').contentDocument.location.reload(true);”但改变了FrameID。这是正确的做法吗？
                
              
                
                        
            
        
    
    
        
        
            
                
                试试$('#refresh1, #refresh2').contentDocument...
                
              
                
            
        
    
    
        
        
            
                
                好的，试试：$('#refresh1, #refresh2').each(function() $(this).contentDocument... );
                
              
                
            
        
    
    
        
        
            
                
                那也行不通。尝试过是这样并且有效... $(window).resize(function() document.getElementById('refresh1').contentDocument.location.reload(true); document.getElementById('refresh2').contentDocument.location .reload(true); );不知道这是否是正确的方式。
                
              
                
                        
            
        
    
    
        
        
            
                
                技术上你可以使用：$('#refresh1, #refresh2').attr('src', $('iframe').attr('src'));以上是关于在浏览器调整大小时刷新选定的 iframe的主要内容，如果未能解决你的问题，请参考以下文章 
 iframe 调整大小在 Mozilla Firefox 中的第二次加载期间不起作用
 刷新与调整浏览器窗口大小时网格布局呈现不同
 调整浏览器窗口大小时如何停止页面刷新（跳转）？
 停止 IE/Edge 窗口大小调整为 iframe 尺寸
 跨域 iframe 调整大小？
 禁用 iframe 自动调整大小