iFrame 无法在 Chrome 中正确加载答案

【问题标题】：iFrame not loading properly in ChromeiFrame 无法在 Chrome 中正确加载
【发布时间】：2020-01-30 18:50:16
【问题描述】：

我正在尝试向潜在客户展示他如何将媒体从他自己的在线广播电台流式传输到页面的简单模型。广播电台是使用外部站点构建的，并且在 Safari 中，在 iFrame 中呈现电台的共享链接可以完美运行，并且在页面加载时立即播放，用户无需执行任何操作。这是纯html代码；这个页面现在没有 JS：

<iframe src="https://lucasdraft.out.airtime.pro/lucasdraft_a" frameborder="0"></iframe>

CSS：

iframe {
        height: 50px;
        width: 200px;
        float: right;
}

但是在 Chrome 中，当我尝试加载页面时，有一半时间 iframe 根本不显示，并且页面持续加载，左下角的状态显示“等待可用套接字” - 这再次发生在苹果浏览器。当它在 Chrome 中加载时，它不会显示来自外部源的基本媒体播放器，而是显示一种带有三个点的灰色半圆形。如果我点击这个灰色斑点，它就会开始播放，但这对用户来说是非常不直观的，更不用说丑陋了。我认为这是 Chrome 中的一项安全功能，但尚未找到任何可靠的修复方法。增加 iframe 的大小不会改变任何内容。

Safari（按预期工作）：

Chrome 加载错误：

加载 iframe 后清除缓存的 Chrome：

谢谢，任何事情都有助于解决这个讨厌的错误！

【问题讨论】：

运行本地服务器，测试关闭文件协议会导致问题
@epascareloo 从本地服务器运行时，Chrome 中的这两个问题仍然存在，特别是 VS Code 之外的 Live Server。

标签： javascript html css google-chrome iframe

【解决方案1】：

对于等待可用套接字，快速谷歌搜索得到了这个答案。 Chrome hangs after certain amount of data transfered - waiting for available socket 在询问之前先用谷歌搜索一下总是一个好主意。

对于视觉问题。您的 iframe 中的 Url 正在调用视频。不同的浏览器对其视频播放器使用不同的风格。 Chrome 只需要多一点高度。我发现 100px 效果很好。

【讨论】：

谢谢马修！我用谷歌搜索了一天半，但猜我没有使用正确的搜索词。高度修复对视频播放器效果很好——我之前尝试过相当大的 iFrame，但可能是加载问题使其无法渲染。

【解决方案2】：

我遇到了同样的问题（在 safari 中工作，但在 chrome 中没有）。就我而言，问题是 Ad-blocker 。广告拦截器通常会编写脚本来覆盖 iframe 样式。

一旦我禁用广告拦截器或在隐身（私人浏览器）窗口中加载项目，iframe 内容就会成功加载。

【讨论】：