Question

我正在创建一个类似于uservoice小部件的小部件，除了我希望页面内容在iFrame中，而不是通过javascript显示小部件。我怎么能有一个完整的页面（宽度/高度100％）iFrame与div固定在浏览器左侧，一个例子（使用javascript而不是css / html）在这里：http://uservoice.com/demo

我希望该小部件在页面上原生显示，内容通过iFrame加载。

有什么想法吗？我不能让iFrame填满整个页面，并且还显示在顶部。我玩过Z-index而没有运气。代码示例：

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

Answer 1

如果您没有加载跨域，那么您可以使用jquery ajax调用加载 http://docs.jquery.com/Ajax/load

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

并用

替换您的iframe

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

Answer 2

那是“clickjacking”，不是吗？

没有什么可能长期工作，因为浏览器（正确地）认为这是一种可以预防的安全威胁。

Answer 3

您可能需要添加保证金：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;

祝你好运！

Answer 4

使用此代码，我在右侧右侧显示一个双滚动条。一个用于网站，一个用于i-frame。

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

Answer 5

您可以将iframe包装在具有低Z-index的div中，然后使用更高的z-index在其上放置一个div。

Answer 6

这对我有用：

添加具有高z-index和绝对位置的overlay 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>

在iframe上叠加div

6 个答案: