刷新我无法控制的跨域网站的 html 框架答案

【问题标题】：Refresh html frames for cross-domain sites out of my control刷新我无法控制的跨域网站的 html 框架
【发布时间】：2020-05-02 10:01:29
【问题描述】：

这可能是一个 x y 问题，所以我先提供一点背景知识。我正在尝试制作一个简单的仪表板，它可以加载许多不同的站点以及它们之间的循环。为此，我设置了一个简单的本地服务器以及一个 html 页面，该页面填充了 distict 框架中的不同站点，然后通过依次隐藏/显示每个站点在它们之间循环。简单来说，页面如下所示：

<html>
<head></head>
<body>
<iframe id="frame1" src="www.example1.com"> </iframe>
<iframe id="frame2" src="www.example2.com"> </iframe>
<iframe id="frame3" src="www.example2.com"> </iframe>
</body>
</html>

现在，我想做的是能够强制重新加载每一帧，以便数据是最新的。对于大多数网站，我可以这样做：

document.getElementById['iframe.src'] = document.getElementById['iframe.src']

但是，对于内容更改未反映在 URL 中的网站，这将不起作用，而是会将页面“刷新”回主页。我想要做的基本上是直接向框架提交 F5 刷新或使用：

document.getElementById("iframe_id").contentWindow.location.href

或

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);

但是，由于 CORS，我不能这样做。考虑到这些网站是我正在查看的外部网站，并且无法控制我正在努力想出解决这个问题的方法。有什么我很明显的遗漏吗？

【问题讨论】：

标签： javascript html iframe cross-domain

【解决方案1】：

您不会错过任何东西，这就是网络的运作方式。您无法控制来自另一个域的页面，除非您使用 postMessage()，但这意味着目标页面会确认您的消息并做出相应反应。

换句话说，除非您可以控制要嵌入的页面，否则您将无法做到这一点。

【讨论】：

【解决方案2】：

而不是尝试告诉 iframe 中的页面重新加载，您将被阻止这样做。您可以通过在 URL 末尾添加一些随机废话来更新 iframe 标记中的 URL

例如，news.bbc.co.uk 将变为 news.bbc.co.uk?qaz=1，然后在每次您希望它刷新时更改它。

【讨论】：

【解决方案3】：

您可以通过删除 iframe 元素并在同一位置再次创建来实现类似时间的效果，

这似乎是同一页面正在刷新。

工作示例：这将每 5 秒刷新一次帧。

<html>
<head></head>
<body>
    <div id="frameContainer1">
        <iframe id="frame1" width="500" height="500" src="http://www.example.com"> </iframe>
    </div>

<script type="text/javascript">
    window.onload = function() {
        setInterval(function(){
            let elem = document.getElementById('frameContainer1');
            var elemFrame = document.getElementById('frame1');
            elem.removeChild(elemFrame);
            var newFrame = document.createElement('iframe');
            newFrame.id = 'frame1';
            newFrame.setAttribute('src', 'http://www.example.com');
            newFrame.width = 500;
            newFrame.height = 500;
            elem.appendChild(newFrame);
        },5000)
    }
</script>
</body>
</html>

【讨论】：