web-dev-qa-db-ja.com

iframeをオーバーレイしてクリックスルーを許可する方法

任意のWebページ内にチャットウィンドウをポップアップする[今すぐチャット]ボタンを配置できるようにしたいのです。

JavaScriptを使用して[チャット]ボタンを追加できますが、それはページのcssを継承し、見た目が悪くなります。それで、私はそれをそれ自身のページに入れて、iframeを使ってどんなウェブページにもそれを埋め込みたいです。

これは私が得ることができる限り近いものです。ページの上部にiframeを表示しますが、クリックは許可しません。 「Click Me」ボタンをクリック可能にするにはどうすればよいですか？

ほとんどのライブチャットがこれを行うので、それが可能であるに違いありません。

<html>
    <head></head>
    <body>
        <div><button>Click Me</button></div>
        <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"></iframe>
    </body>
</html>

うまくいけば、iframeのサイズを正確に調整することなく可能ですが、そうではないかもしれません。 iframeがその背後にあるWebページを表示できることは奇妙ですが、クリックすることを許可することはできません。

javascripthtmlcssiframe
11
James

z-indexは、配置された要素（position：absolute、position：relative、またはposition：fixed）でのみ機能します

ボタンdivコンテナに位置を指定してください

From： https://developer.mozilla.org/en/docs/Web/CSS/z-index

Z-indexプロパティは、配置された要素とその子孫のzオーダーを指定します。要素がオーバーラップする場合、zオーダーはどちらがもう一方をカバーするかを決定します。一般に、より大きなZインデックスを持つ要素は、より低いZインデックスを持つ要素をカバーします。

配置されたボックス（つまり、静的以外の位置を持つボックス）の場合、z-indexプロパティは以下を指定します。

現在のスタックコンテキスト内のボックスのスタックレベル。ボックスがローカルスタッキングコンテキストを確立するかどうか。

And From http://www.w3schools.com/cssref/pr_pos_z-index.asp

定義と使用法z-indexプロパティは、要素のスタック順を指定します。

スタック順序が大きい要素は、常にスタック順序が低い要素の前にあります。

注：z-indexは、配置された要素（position：absolute、position：relative、またはposition：fixed）でのみ機能します。

5
Nermien Barakat

チャット自体がページの右下の小さなセクションのみを占める場合に、チャットを含むiFrameが画面全体をカバーするようにしたい理由について少し混乱しています。スタックの順序が大きい要素は、常にスタックの順序が低い要素の前に配置されます...したがって、サイズ100％100％のiFrameで何をしようとしているかを達成するには、かなり長い間回避策が必要です。

「はい、次の方法ではiframeの正確なサイズを操作する必要があります」

数か月前にこのようなことをしましたが、絶対配置を使用してページにiFrameを配置しました。これらの「ライブチャット」ウィンドウのほとんどはコンテンツのスクロールを許可しているため、iFrameの2つの状態/高さで作業しました。 iFrameの2つの高さは、iFrame内に含まれるチャットウィンドウの開いている高さと閉じている高さに一致する必要があります。

これで、ユーザーが[今すぐチャット]ボタンをクリックすると... iFrameは、親ウィンドウの関数を呼び出して、iFrameの高さを操作します。 *（親ウィンドウ内の）OPENおよびCLOSE機能がiFrameの高さを操作できるように、必ずiFrameにIDタグを追加してください。

これは私にとってはうまくいきました！

HTML

_<div><button>Click Me</button></div>
<iframe id="ChatFrame" allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="position:absolute; height:38px; width:165px; bottom:0px; right:0px; borde:0px; background:none;"></iframe>
_

親ウィンドウに配置されるJavaScript

_var LiveChatOpen = false;

function open_LiveChatWindow()
{
  document.getElementById('ChatFrame').style.height=340+'px';
  document.getElementById('ChatFrame').style.width=320+'px';  
  LiveChatOpen = true;
}//End of open_LiveChatWindow


function close_LiveChatWindow()
{
  document.getElementById('ChatFrame').style.height=38+'px';
  document.getElementById('ChatFrame').style.width=165+'px'; 
  LiveChatOpen = false;     
}//End of close_LiveChatWindow
_

iFrame経由で配置されているページで行うこと：ここで必要なのは、onClickイベントを添付することだけですチャットウィンドウを最大化および最小化するチャットGUIのボタン。

例：親ウィンドウのopen_LiveChatWindow（）関数を呼び出す「CHAT NOW」ボタンにイベントリスナーを追加します。

親ウィンドウで関数を呼び出すことができます：parent.open_LiveChatWindow();

このソリューションがお役に立てば幸いです。

1
Really Nice Code

ボタンのz-indexを9999に変更し、相対的な位置に設定すると、クリックを通過させることができます。

ただし、iframeには別のドメインのページが埋め込まれているため（私はプランカーを使用しているため）、 Same Origin security により、「チャット今」までクリックを伝達できませんでした

これを試してください plunker

<!DOCTYPE html>
<html>
<head>
  <script>
    var openChat = function() {
      var iframe = document.getElementById('iframeId');
      var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
      innerDoc.getElementById("botlibrechatboxbarmax").click();
    };
  </script>
</head>
<body>
  <div style="z-index:9999; position:relative">
    <button onclick="openChat()">Click Me</button>
  </div>
  <div>
    <iframe id="iframeId" allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"></iframe>
  </div>
</body>
</html>
0
Souji

少なくとも他のいくつかの未回答のSO質問：

clickjacking のようなものです。

他の何かの上に配置されたものはすべてクリックターゲットになり、すべてのインタラクションを「スチール」します。同じことが、100％幅の半透明divでWebページの背景を「フェード」するポップアップモーダル（divs）でも発生します。オーバーレイされた要素（iframe）でマウスクリックをキャプチャし、位置をメインページに戻し、その位置で適切な要素のクリックをトリガーする必要があります。

代替案：

  • ボタンのインタラクティビティのみに関心がある場合は、ボタンをクリックしてiframeを埋め込むことができますか？これにより、その背後にあるWebページとの対話は依然として許可されません。
  • Iframeを100％にしないでください-ロードするコンテンツに合わせてサイズを指定するだけです
0
drzaus

質問を正しく解釈する場合、 ボタンをクリックしてiframeでイベントを発生させることができますか？width、heightのiframeを調整できます。特定の要件を満たすための_およびbutton要素。

$(function() {

  var url = "http://www.wpclipart.com/animals/cats/Cat_outside.png";
  var iframe = $("<iframe>", {
    "id": "frame",
    "width": "100px",
    "height": "50px"
  });
  var body = $("body").append(iframe);

  var img = $("<img>", {
    "id": "frameimg",
    "width": "400px",
    "height": "300px",
  }).css("background", "blue");
  var a = $("<a>", {
    "href": url,
    "html": img
  }).css("textDecoration", "none");
  var button = $("<button>", {
      "html": "click"
    }).css({
      width: iframe.prop("width"),
      height: iframe.prop("height"),
      fontSize: "48px",
      position: "absolute",
      left: 0
    })
    .one("click", function(e) {
      $(this).remove()
      body.find("#frame")
        .attr("width", "400px")
        .attr("height", "300px")
        .attr("style", "")
        .contents()
        .find("body a")
        .get(0).click()
    });
  button.appendTo(body);
  body.find("#frame").contents()
  .find("body").html(a);
});

jsfiddle http://jsfiddle.net/2x4xz/11/

0
guest271314

最も簡単な方法は、両方の要素に位置とz-indexを使用することです。 z-indexは、要素が属する「レイヤー」を定義します。より高いz-indexを持つ要素が別の要素の前に表示されます。 Z-indexは配置された要素でのみ機能するため、ボタンとiframeの両方を配置する必要があります。次のようになります。

<html>
<body>
 <div><button style="position: relative; z-index:1;" onclick="alert('You just clicked')">Click Me</button></div>
        <iframe  allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px;  bottom: 0px; width: 100%;z-index:0; "></iframe>


        </body>

</html>

Z-indexを使用せずに同じ結果を達成する別の方法は、コード内の要素の順序を切り替えることです。ブラウザは最後に言及した要素を他の要素の上に配置するためです。その場合、ボタンの位置を絶対（本体である親要素の位置を参照する）に設定し、上と左の値を定義する必要があります。

<html>
<body>
 <div>
        <iframe  allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px;  bottom: 0px; width: 100%;"></iframe>
    <button onclick="alert('You just clicked')" style="position:absolute; top:0px; left: 0px;">Click Me</button></div>

        </body>

</html>
0
RawkFist