Как наложить iframe и разрешить щелчок

Ответ 1

z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная)

Поэтому не забудьте указать контейнер контейнера для кнопок

От: https://developer.mozilla.org/en/docs/Web/CSS/z-index

Свойство z-index задает z-порядок позиционированного элемента и его потомков. Когда элементы перекрываются, z-порядок определяет, какой из них охватывает другой. Элемент с большим z-индексом обычно покрывает элемент с более низким.

Для позиционированного окна (то есть одного с любым положением, отличным от static), свойство z-index указывает:

Уровень стека поля в текущем контексте стекирования. Будь то поле устанавливает локальный контекст стекирования.

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

Определение и использование Свойство z-index указывает порядок стека элемент.

Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.

Примечание: z-индекс работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

Ответ 2

Я немного смущен тем, почему вы хотите, чтобы iFrame с чатом охватывал весь экран, когда сам чат занимает только небольшую секцию в правом нижнем углу страницы. Элементы с большим порядком стека всегда помещаются перед элементами с более низким порядком стека... поэтому для достижения того, что вы пытаетесь сделать с iFrame размером 100% 100%, будет более чем легко потребоваться довольно длинный обходной путь.

"Да, следующий метод предполагает использование точного размера iframe"

Я сделал что-то вроде этого несколько месяцев назад, и я просто разместил iFrame на странице, используя абсолютное позиционирование. Поскольку большинство этих окон "Live Chat" позволяют прокручивать содержимое, я просто работал с двумя состояниями/высотами для iFrame. Две высоты iFrame должны совпадать с открытой и близкой высотами окна чата, содержащегося в iFrame.

Теперь, когда пользователь нажимает кнопку "Чат сейчас"... iFrame вызовет функцию своего родительского окна, которое будет управлять высотой iFrame. * Обязательно добавьте тег ID в iFrame, чтобы позволить функциям OPEN и CLOSE (в родительском окне) управлять высотой iFrame.

Это сработало для меня!

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 к кнопкам в Chat-GUI, который максимизирует и сводит к минимуму окно чата.

Например: добавьте прослушиватель событий в кнопку "CHAT NOW", которая вызывает функцию open_LiveChatWindow() родительского окна.

Вы можете вызвать функции в родительском окне следующим образом: parent.open_LiveChatWindow();

Надеюсь, вы нашли это решение полезным.

Ответ 3

Лучше всего было бы вставить небольшой javascript, который показывает кнопку, и обрабатывает iframe:

function Yourprogramsnamestart(id){
  var container=document.getElementById(id);
  var a=document.createElement("a");
  a.textContent="Start App";
  a.onclick=function(){
    //create iframe
  };
  container.appendChild(a);
  }

Теперь клиент может это сделать:

<div id="app"></div>
<script src="yourscript.js"></script>
<script>
 Yourprogramsnestart("app");
 </script>

Ответ 4

Если интерпретировать вопрос правильно, вы можете использовать вариацию подхода при Может ли щелчок кнопки вызвать событие в iframe? Откорректируйте width, height of 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/

Ответ 5

Самый простой способ - использовать положение и z-индекс для обоих элементов. Z-index определит "слой", которому принадлежит элемент. Элемент с более высоким z-индексом будет отображаться перед другим. 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>

Ответ 6

Я изменил z-индекс кнопки на 9999 с относительным положением, и это позволяет кликам пройти.

Однако, поскольку iframe встраивает страницу из другого домена (так как я был на plunker), клики не могли быть распространены до "Чат сейчас" из-за Безопасность одинакового происхождения

Попробуйте 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>

Ответ 7

Что вы заявляете (100% -ый охват iframe не мешает элементам ниже) непрактичен и не был годами, по крайней мере в соответствии с некоторыми другими неотвеченными вопросами SO:

• Разрешить переходить через iFrame к содержанию за ним
• Щелкните прозрачный плавающий iframe

Это похоже на clickjacking.

Все, что позиционируется над чем-то другим, станет целью клика и "украдет" все взаимодействие. То же самое происходит с всплывающими модалами (div s), которые "затухают" на фоне веб-страницы с помощью полупрозрачного div шириной 100%. Вам нужно будет захватить щелчки мыши в наложенном элементе (iframe) и передать позицию на главную страницу и вызвать ее щелчок по соответствующему элементу в этой позиции.

Альтернатива:

• Если вы только заботитесь об интерактивности кнопок - можете ли вы щелкнуть кнопку вставить iframe? Это все равно не позволит взаимодействовать с веб-страницей.
• Не делайте iframe 100% - просто укажите размер, соответствующий его содержимому, которое вы собираетесь загрузить

Ответ 8

Это очень быстро и просто. Просто добавьте id в iframe и в css задайте указатель-события: none для этого id.

См. здесь рабочий код. http://codepen.io/sajiddesigner/pen/ygyjRV

КОД

HTML

<html>
<head></head>
<body>
    <div><button>Click Me</button></div>
    <iframe id="MyIframe" 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>

CSS

 #MyIframe{
     pointer-events:none;
 }

Надеюсь, это сработает для вас.