web-dev-qa-db-ja.com

iframe上にdivをオーバーレイ

ウィジェットをjavascriptで表示するのではなく、ページのコンテンツをiFrameに配置することを除いて、uservoiceウィジェットと同様のウィジェットを作成しています。ブラウザの左側にdivが固定されたフルページ（幅/高さ100％）のiFrameを作成するにはどうすればよいですか？例（css/htmlではなくjavascriptを使用）は次のとおりです： http：// uservoice。 com/demo

そのウィジェットをページにネイティブに表示し、コンテンツをiFrame経由でロードしたいと思います。

何か案は？ iFrameをページ全体に表示することはできません。また、上部に表示することもできません。私はz-indexesで遊んだことがありません。コード例：

    <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>
cssiframehtml
9
Peter Clark

クロスドメインをロードしていない場合は、jquery ajax呼び出しを使用してロードすることができます http://docs.jquery.com/Ajax/load

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

iframeを次のように置き換えます

<div id="content"></div>
12
Stephen Binns

それは「 クリックジャッキング 」ですよね？

ブラウザはこれを（当然のことながら）防止すべきセキュリティの脅威と見なしているため、長期的には何も機能しない可能性があります。

5
brianary

おそらくmargin：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;

幸運を！

4
Joshua

このコードを使用すると、右側の右側に二重スクロールバーが表示されます。 1つはWebサイト用、もう1つはi-frame用です。

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

これは私のために働いた：

  • 高いz-indexと絶対位置を持つオーバーレイdivを追加します
  • iframeも絶対位置に配置する
  • div内にiframeを追加する

オーバーレイ付きの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>
0
miraculixx

Iframeを低いZインデックスのdivでラップしてから、高いzインデックスのdivをその上に配置することができます。

0
wilwaldon