如何使 iframe 覆盖基本页面的 html？答案

【问题标题】：How to make an iframe override the html of the base page?如何使 iframe 覆盖基本页面的 html？
【发布时间】：2013-12-03 19:26:32
【问题描述】：

我目前正在这样做以注入 iframe：

var iFrame  = document.createElement ("iframe");
iFrame.src  = chrome.extension.getURL ("chrome.html");
iFrame.setAttribute("scrolling", "no");
iFrame.setAttribute("frameborder", "0");
iFrame.setAttribute("style", "border:none; width:100%; height:20%");
document.body.insertBefore (iFrame, document.body.firstChild);

虽然它运行良好，但它会将 iframe 注入网页顶部。因此，如果您向下滚动，则必须向上滚动才能查看 iframe。我想知道如何在页面顶部添加一个 iframe，它就像一个下拉菜单（放在页面顶部）并在滚动后消失。

【问题讨论】：

你的意思是滚动后不会消失？
并非如此。我的意思是滚动后消失，或者当你开始滚动时消失。
啊！我明白你的意思了。是的，当您开始滚动时不会消失，但会在下拉菜单的 3 或 4 秒内消失。

标签： javascript jquery html iframe

【解决方案1】：

添加这个：

function checkScroll()
{
    //remove the iframe
    //iFrame.parentNode.removeChild(iFrame);

    //or remove after 2 secs
    setTimeout(function(){ iFrame.parentNode.removeChild(iFrame); }, 2000);

    //off the scroll listener
    document.removeEventListener('scroll', checkScroll); 
}
document.addEventListener('scroll', checkScroll);

http://jsfiddle.net/rooseve/QF3qY/1/

【讨论】：

谢谢。但是如何在绝对顶部位置添加 iFrame？
我把它设为固定位置（见css），所以滚动时可以看到
css完全搞乱了iframe在各个网站上的位置。
我明白了，您需要定位您刚刚创建的特定 iframe，对吗？添加 iFrame.style.position="固定";看这里jsfiddle.net/rooseve/QF3qY/3

【解决方案2】：

您创建了一个位于页面顶部的空容器（z-index，绝对定位），并在那里添加您的 ifra，而不是 body 的第一个孩子。您可以通过 JavaScript 隐藏容器滚动条。

【讨论】：