为什么这个 iframe 在第一次打开页面时加载有边框，但在重新加载页面时却没有？
Why does this iframe load with a border the first time the page is opened but not when the page is reloaded?
当第一次加载以下页面时（例如进入url或在windows资源管理器中打开文件时），iframe 绘制有边框。但是，当页面为reloaded/refreshed时，就没有边框了。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe
src="javascript: window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')"
allowtransparency="true"
style="border: none"
scrolling="no"
frameBorder="0"
seamless="seamless">
</iframe>
</body>
</html>
我正在尝试了解此问题的原因，并可能找到解决方法来解决我在与 Adobe Captivate 集成时遇到的问题，Adobe Captivate 使用以下机制加载 Web 对象。任何帮助将不胜感激。
这来自 Microsoft Edge 版本：42.17134.1.0
编辑： 我知道边框的呈现在某种程度上与 iframe 的 javascript 方案 url 有关，但这不是什么我有能力改变。我想知道 Microsoft Edge 中导致 iframe 边框在第一次加载时呈现的机制。我们不支持的其他浏览器 (Chrome/Safari/Firefox) 呈现边框。
无法在此处重现此问题。但是，您的屏幕截图似乎只是一个边框。使用 CSS 设置边框会停止吗？ IE。边框：0；
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe style="border: 0px;"
src="javascript: window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')"
allowtransparency="true"
scrolling="no"
frameBorder="0"
seamless="seamless">
</iframe>
</body>
</html>
如果您将边框设置为像 3px solid red 这样可见的东西，您可以清楚地知道没有 CSS 会在这里拯救您：
正如其他人在评论中指出的那样，这是由 javascript:… 源属性引起的。为了确定是否有完整的解决方法，我们可能需要更多关于 <iframe> 的确切部分您可以更改的信息，因为您显然可以给它一个样式属性。也就是说，您可以尝试以下操作：
如果您可以将 src 属性更改为完全不同的东西
我的建议是有一个单独的 frame.html 文件，旧的 src 属性包含在 <script> 标签中，开头没有 javascript:：
<script>window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')</script>
然后，您可以将<iframe>更改为指向该文件。需要注意的几点：
- 我删除了
seamless 属性，因为它目前不在规范中并且 not supported by any browser。
scrolling和frameBorder属性是obsolete as of HTML5，所以我用CSS代替。- 我发现
allowTransparency 中的 T 是要大写的，但我不是 100% 如此。
<iframe
src="frame.html"
allowTransparency="true"
style="border: 0; overflow: hidden">
</iframe>
经过这些更改后，<iframe> 出现了，如您所料。
如果值是固定的，但你可以在它周围添加东西
如果您不能移动 javascript 部分，但可以改变 src 属性，您可能会发现 data: URL 有用到一个单独的文件。您需要做的就是将属性的当前值包装在 data:text/html;utf8,<script>{ 和 }</script> 中。这将创建一个有效的 data: URL 指向我们紧接着提供的 UTF-8 编码 HTML 文件，其中包含相同的脚本标签。我添加了方括号，通过将 javascript: 部分用作 object initialization 的一部分来使它成为有效的 JS 语法。这样，代码就不会因为语法错误而失败，window.open 仍然会被调用。
如果可以在 <iframe>
周围添加 JavaScript
这也可以通过一些优秀的老 JS 黑客来修复，使用与第一部分相同的方法，但不改变任何已修复的部分或需要一个新文件，前提是您能够在<iframe>。将以下脚本标记放在 <iframe> 下方或将其放在 workaround.js 文件中（不带 <script> 标记）并在外部 link。 For best results 并确保任何 <iframe> 元素在脚本 运行 时被解析，我建议将 <script> 标签放在 <body> 的底部.
<script>
(function(){
var frames = document.querySelectorAll('iframe[src^="javascript:"]');
for (var i = 0, l = frames.length; i < l; i++)
frames[i].src = frames[i].src.replace(/^javascript:(.*)$/, 'data:text/html;utf8,\x3cscript>\x3c/script>');
})();
</script>
这将在页面上找到所有 <iframe> 标签，其 src 属性以 javascript: 和 运行 解决方法解决问题.
如果上述none适用
恐怕你运气不好。缺少 reporting the issue to Microsoft 并修复它，据我所知，您不太可能找到其他解决方案。
当第一次加载以下页面时（例如进入url或在windows资源管理器中打开文件时），iframe 绘制有边框。但是，当页面为reloaded/refreshed时，就没有边框了。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe
src="javascript: window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')"
allowtransparency="true"
style="border: none"
scrolling="no"
frameBorder="0"
seamless="seamless">
</iframe>
</body>
</html>
我正在尝试了解此问题的原因，并可能找到解决方法来解决我在与 Adobe Captivate 集成时遇到的问题，Adobe Captivate 使用以下机制加载 Web 对象。任何帮助将不胜感激。
这来自 Microsoft Edge 版本：42.17134.1.0
编辑： 我知道边框的呈现在某种程度上与 iframe 的 javascript 方案 url 有关，但这不是什么我有能力改变。我想知道 Microsoft Edge 中导致 iframe 边框在第一次加载时呈现的机制。我们不支持的其他浏览器 (Chrome/Safari/Firefox) 呈现边框。
无法在此处重现此问题。但是，您的屏幕截图似乎只是一个边框。使用 CSS 设置边框会停止吗？ IE。边框：0；
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe style="border: 0px;"
src="javascript: window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')"
allowtransparency="true"
scrolling="no"
frameBorder="0"
seamless="seamless">
</iframe>
</body>
</html>
如果您将边框设置为像 3px solid red 这样可见的东西，您可以清楚地知道没有 CSS 会在这里拯救您：
正如其他人在评论中指出的那样，这是由 javascript:… 源属性引起的。为了确定是否有完整的解决方法，我们可能需要更多关于 <iframe> 的确切部分您可以更改的信息，因为您显然可以给它一个样式属性。也就是说，您可以尝试以下操作：
如果您可以将 src 属性更改为完全不同的东西
我的建议是有一个单独的 frame.html 文件，旧的 src 属性包含在 <script> 标签中，开头没有 javascript:：
<script>window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')</script>
然后，您可以将<iframe>更改为指向该文件。需要注意的几点：
- 我删除了
seamless属性，因为它目前不在规范中并且 not supported by any browser。 scrolling和frameBorder属性是obsolete as of HTML5，所以我用CSS代替。- 我发现
allowTransparency中的T是要大写的，但我不是 100% 如此。
<iframe
src="frame.html"
allowTransparency="true"
style="border: 0; overflow: hidden">
</iframe>
经过这些更改后，<iframe> 出现了，如您所料。
如果值是固定的，但你可以在它周围添加东西
如果您不能移动 javascript 部分，但可以改变 src 属性，您可能会发现 data: URL 有用到一个单独的文件。您需要做的就是将属性的当前值包装在 data:text/html;utf8,<script>{ 和 }</script> 中。这将创建一个有效的 data: URL 指向我们紧接着提供的 UTF-8 编码 HTML 文件，其中包含相同的脚本标签。我添加了方括号，通过将 javascript: 部分用作 object initialization 的一部分来使它成为有效的 JS 语法。这样，代码就不会因为语法错误而失败，window.open 仍然会被调用。
如果可以在 <iframe>
周围添加 JavaScript
这也可以通过一些优秀的老 JS 黑客来修复，使用与第一部分相同的方法，但不改变任何已修复的部分或需要一个新文件，前提是您能够在<iframe>。将以下脚本标记放在 <iframe> 下方或将其放在 workaround.js 文件中（不带 <script> 标记）并在外部 link。 For best results 并确保任何 <iframe> 元素在脚本 运行 时被解析，我建议将 <script> 标签放在 <body> 的底部.
<script>
(function(){
var frames = document.querySelectorAll('iframe[src^="javascript:"]');
for (var i = 0, l = frames.length; i < l; i++)
frames[i].src = frames[i].src.replace(/^javascript:(.*)$/, 'data:text/html;utf8,\x3cscript>\x3c/script>');
})();
</script>
这将在页面上找到所有 <iframe> 标签，其 src 属性以 javascript: 和 运行 解决方法解决问题.
如果上述none适用
恐怕你运气不好。缺少 reporting the issue to Microsoft 并修复它，据我所知，您不太可能找到其他解决方案。