iframe 不显示正确的框架

Question

我正在尝试加载显示其导航栏的 bing 的 iframe，但发生了一些奇怪的事情。当我加载它时，它不显示导航栏，而是显示搜索栏，但是如果我更改（在 chrome 检查器中）高度从 35px 到 3500px，然后再回到 35px。它显示导航栏。

<iframe src="http://www.bing.com/" scrolling="no" style="border: 0px none; position:absolute; left=0px; top=0px; margin-top: 0px; z-index:0; width:1700px; height:35px;"></iframe>

有人知道为什么会这样吗？谢谢！

Answer 1

Bing 上似乎有一些 JavaScript 在页面加载时将搜索栏移动到顶部。

看来您可以通过在 CSS 中默认隐藏 iframe 来绕过这个问题，然后使用 jQuery:

在准备好的文档中显示它

<iframe src="http://www.bing.com/" scrolling="no" style="border: 0px none;
    position:absolute; left:0px; top:0px; margin-top: 0px; z-index:0; width:1700px;
    height:35px; display: none;">
</iframe>

$(function () {
    $("iframe").show();
});

DEMO

Answer 2

你确实需要在这里使用一些 javascript 并且隐藏最初似乎是最好的前进方式。您可以通过监听 iframe 的 load 事件在纯 javascript 中完成此操作，然后然后显示它：

document.getElementById('f').addEventListener('load', function() {
    document.getElementById('f').style.display = '';
});

<iframe id="f" src="http://www.bing.com/" scrolling="no" style="border: 0px none; position:absolute; left=0px; top=0px; margin-top: 0px; z-index:0; width:1700px; height:35px; display:none;"></iframe>

iframe 不显示正确的框架

iframe doesnt show the correct frame

html

iframe