Question

我目前正在这样做以注入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，它的作用类似于下拉列表（放在页面顶部）并在滚动后消失。

Answer 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/

Answer 2

您创建一个位于页面顶部的空容器（z-index，绝对定位），然后在那里添加ifram而不是正文的第一个子容器。您可以通过JavaScript隐藏容器onscroll。

如何使iframe覆盖基页的html？

2 个答案: