覆盖div iframe

我正在制作一个类似于uservoice小部件的小部件，但我希望页面的内容位于iFrame中，而不是通过javascript显示小部件。我怎么能有一个完整的页面（宽/高100％）的iFrame与固定在浏览器的左边，一个例子一个div（使用JavaScript而不是CSS/HTML）是在这里：http://uservoice.com/demo 覆盖div iframe

我想要的插件以本地方式出现在页面上，并通过iFrame加载内容。

任何想法？我无法让iFrame填满整个页面，并且也显示在最上面。我已经玩过z-索引而没有运气。代码示例：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

      <style> 
      #widget { 
       left: 0px; 
       position: absolute; 
       top: 50%; 
       display: block; 
       z-index:100001; 
       width: 25px; 
       } 
      #content { 
       z-index:1; 
       } 
      </style> 
</head> 
<body> 
    <div id="widget"> 
    widget 
    </div> 


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>

来源

2010-01-19 Peter Clark

我在Ubuntu上测试你的代码使用ff3.5.7，它似乎工作得很好。你使用的是什么设置？ – Flatlin3 2010-01-19 22:59:20

z-index在iframe上不起作用。 – Michael 2013-01-07 10:16:52

如果你不加载跨域，那么你可以只加载使用jQuery AJAX调用 http://docs.jquery.com/Ajax/load

$(document).ready(function() { 
    $("#content").load("page.html"); 
});

与

<div id="content"></div>

来源

2010-01-19 16:18:13

辉煌和容易 – 2014-01-23 10:24:26

取代你的iframe你可能需要添加边距：auto;到你的iFrame或浮动div。这将使它填满屏幕100％。

例子：

.width { 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    width:250px; 
    height:150px; 
    margin:auto; 
}

将它固定到浏览器的左边，你可以使用：

margin:auto auto auto 0;

祝你好运！

来源

2010-01-20 21:05:59 Joshua

约书亚：感谢的人，它的工作:) – Gendaful 2011-02-24 17:55:59

你可以将你的iframe包装在一个低Z指数的div中，然后用更高的Z指数在它上面放置一个div。

来源

2010-02-02 05:10:54 wilwaldon

试图用一个YouTube视频iframe，它没有奏效。 – 2010-09-29 08:55:15

在Opera，Firefox和Rekonq上测试。不起作用。 – Michael 2013-01-07 10:11:17

它只会工作的事情是你需要在两个元素的CSS中添加绝对位置。 :) – 2015-05-30 09:04:55

这就是“clickjacking”，不是吗？

没有什么可能长期发挥作用，因为浏览器（正确）将此视为需要防范的安全威胁。

来源

2010-02-03 16:20:57 brianary

这为我工作：

高的z-index和绝对位置
使iframe中也定位绝对
添加一个div内的iframe添加覆盖DIV

带覆盖的div：

<div style="z-index:99;position:absolute;top:0;right:0"> 
    ...overlay html... 
</div>

iframe的：

<style> 
    iframe { 
    position: absolute; 
    border: none; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    } 
</style> 
<div> 
    <iframe src="http://..."> </iframe> 
</div>

来源

2014-12-02 11:51:24 miraculixx

与此代码我得到的权双重滚动条。一个用于网站，另一个用于i-frame。

<style> 
    iframe { 
    position: absolute; 
    border: none; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    } 
</style> 
<div> 
    <iframe src="http://..."> </iframe> 
</div>

来源

2016-10-26 10:23:52

覆盖div iframe

回答

相关问题