Wie overlay einem iframe und zulassen klicken Sie sich durch

Ich möchte in der Lage sein, eine "Chat Now" - button, öffnet sich ein chat-Fenster innerhalb einer Webseite.

Ich hinzufügen kann, den "Chat Now" - button mit JavaScript, aber das erbt css in die Seite und macht es schlecht Aussehen. Also ich möchte es in seine eigene Seite, und Betten Sie ihn in eine beliebige Webseite mit einem iframe.

Dies ist so nah wie ich es bekommen kann. Es zeigt den iframe auf der Oberseite der Seite, aber nicht erlauben Klicks durch zu gehen. Wie kann ich den button "Klick Mich" anklickbar?

Sehe ich die meisten live-chat, tun Sie dies, so muss es möglich sein.

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

Hoffentlich ist es auch möglich, ohne dass die Größe des iframe genau, aber vielleicht... ist es nicht? Es ist seltsam, dass der iframe kann die Webseite anzeigen zu können, die hinter es, aber können es nicht zulassen geklickt werden.

Haben Sie einen Blick auf Fenster.postMessage. und die meisten Dienste erlauben es dem Anwender einbetten von javascript...
wickeln Sie beide in einen Behälter und stellen Sie den container gehen, in voller Größe und stellen Sie die position der Schaltfläche absoluten auch
Ist Voraussetzung, um die Fähigkeit zu klicken iframe element? Oder Stil button zu decken iframe und bei click von button gelten Veranstaltung zu iframe?
Das Ziel ist, Betten Sie ein chat-Fenster in eine normale Webseite mit einem iframe, der "Klick Mich" - button ist nur ein Beispiel für eine normale Webseite sollte immer noch anklickbar, auch wenn Sie den iframe.

InformationsquelleAutor James | 2017-01-01

5

z-index funktioniert nur bei positionierten Elementen (position:absolute, position:relative oder position:fixed)

So stellen Sie sicher, geben Sie Ihrem button-div-container ein position

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

Den z-index-Eigenschaft gibt die z-Reihenfolge eines positionierten Elements und
seine Nachkommen. Wenn sich Elemente überlappen, z-Reihenfolge bestimmt, welche eine
deckt die andere. Ein element mit einem größeren z-index in der Regel umfasst eine
element mit einer niedrigeren.

Für eine positionierte box (mit einer beliebigen anderen position als
statisch), die z-index-Eigenschaft gibt:

Den stack-level der box in der aktuellen stacking-context. Ob
die box stellt einen lokalen stacking-context.

Und Von http://www.w3schools.com/cssref/pr_pos_z-index.asp

Definition und Verwendung Der z-index-Eigenschaft gibt die stack-Reihenfolge der
ein element ist.

Ein element mit größerer Stapel, um ist immer vor einem element
mit einem unteren Stapel um.

Hinweis: der z-index funktioniert nur bei positionierten Elementen (position:absolute,
position:relative oder position:fixed).

die Schaltfläche ist nur ein Beispiel von einer Webseite eingebettet werden können, "etwas" in die Webseite sollte anklickbar
ja hab deinen Punkt, aber wie alles auf der Seite vorhanden sind anklickbar, während der iframe alle die Seite mit 100% Breite, Höhe? zu machen, was anklickbar ist, dann sollten Sie das iframe auf der Rückseite oder zu verringern seine Größe.
aber ich sehe viele live chat Produkte, die dies tun, werden Sie Betten Ihre live-chat "Chat Now" - button in einem iframe mit 100% Breite/Höhe, aber irgendwie trotzdem mit Klicks auf die Seite zu gehen. Es muss einen Weg, dies zu tun.
was meinst du mit "legen Sie die iframe auf der Rückseite"? Der iframe fügt nur den Knopf, und ein chat-Fenster mit z-index und Feste Positionen in die gerahmte Webseite
ja, ich sehe es zu 100% im iframe-aber 100% von einem div-container, die eine Feste Höhe und Breite, also die Größe des iframe wird nie außerhalb der div-container.

InformationsquelleAutor Nermien Barakat
1

Ich bin ein wenig verwirrt, warum Sie wollen, dass der iFrame mit dem chat auf den ganzen Bildschirm bedecken, wenn der chat sich nur in einem kleinen Abschnitt auf der rechten unteren Seite. Elemente mit einem größeren stack, um immer vor den Elementen mit einer unteren Stapel um... so das zu erreichen, was Sie zu tun versuchen, mit einem iFrame der Größe 100% 100% mehr als leicht erfordern eine fragwürdig langen Abhilfe.

"Ja die folgende Methode erfordert die Manipulation der genauen Größe des iframe"

Ich hab sowas schon ein paar Monate her und ich einfach den iFrame auf der Seite mit der absoluten Positionierung. Da die meisten von diesen "Live-Chat" - Fenster ermöglichen das scrollen für die eigenen Inhalte, ich arbeitete nur mit zwei Zuständen/Höhen für den iFrame. Die zwei Höhen der iFrame muss mit dem öffnen und schließen Höhen des chat-Fenster, die in den iFrame.

Nun.. wenn der Benutzer klickt auf den Chat-button Jetzt... das iFrame wird eine Funktion aufrufen des übergeordneten Fenster, Bearbeiten Sie die Höhe des iFrame. *Seien Sie einfach sicher, dass Sie eine ID-tag auf der iFrame zu erlauben das ÖFFNEN und SCHLIEßEN-Funktionen (in das übergeordnete Fenster) manipulieren zu können, die Höhe des iFrame.

Dies funktionierte gut für mich!

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 auf das übergeordnete Fenster
```
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
```
Sachen zu tun auf der Seite, die wird per iFrame:
Alles was Sie jetzt tun müssen, ist befestigen Sie die onClick-events der buttons in der Chat-GUI, die Maximiert und Minimiert das chat-Fenster.

ZB: Fügen Sie einen Ereignis-listener auf die "CHAT NOW" - Taste, ruft die open_LiveChatWindow () - Funktion des übergeordneten Fensters.

Können Sie rufen Sie die Funktionen in der übergeordnete Fenster wie diese: parent.open_LiveChatWindow();

Ich hoffe, Sie finden diese Lösung sinnvoll.

InformationsquelleAutor Really Nice Code

Wenn die Frage richtig interpretieren, können Sie eine variation von Ansatz an Kann eine Schaltfläche, klicken Sie auf führen Sie eine Veranstaltung in iframe? Anpassen width, height von iframe und button Elemente erfüllen spezifische Anforderungen.

$(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/

InformationsquelleAutor guest271314

Der einfachste Weg ist die Verwendung der position und z-index für die beiden Elemente.
Der z-index definiert die "Schicht" ein element angehört. Das element mit einem höheren z-index wird angezeigt, bevor eine weitere. Z-index funktioniert nur bei positionierten Elementen daher müssen Sie in der Lage, sowohl die Taste und die iframe. Es sollte wie folgt Aussehen:

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

Einem anderen Weg das gleiche Ergebnis zu erzielen, ohne mit der z-index ist die Umstellung der Reihenfolge der Elemente im code. Da der browser die zuletzt genannten Elements auf der Oberseite des anderen. In diesem Fall müssen Sie die position der Schaltfläche, um die absolute (die beziehen sich auf die position im übergeordneten element, das die Körper) und definieren die top und left Werte:

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

InformationsquelleAutor RawkFist

0

Was Ihnen Zustand (100% Abdeckung iframe nicht stören Elemente unterhalb) ist nicht praktikabel und wurde auch nicht für Jahre, zumindest laut einigen anderen unbeantworteten Fragen:
- Ermöglichen klicken Sie auf passieren iFrame an Inhalt dahinter
- Klicken Sie sich durch transparente schwimmende iframe
Es ist irgendwie wie clickjacking.

Alles in Position gebracht über etwas anderes geworden, die auf Ziel und "stehlen" alle Interaktion. Das gleiche passiert mit dem pop-up-modals (divs) , "fade" der hintergrund der Webseite mit einer 100% Breite lichtdurchlässige div. Sie müssten, um zu erfassen Mausklicks in das überlagerte element (iframe) und pass die position zurück auf die Hauptseite und es lösen klicken Sie auf das entsprechende element an dieser position.

Alternativen:
- wenn Sie nur über die Schaltfläche Interaktivität -- können Sie in der Schaltfläche auf " einbetten iframe statt? Dies noch nicht zulassen, wird die Interaktion mit der Webseite hinter.
- Machen Sie nicht den iframe 100% -- geben Sie einfach die Größe, es passt zum Inhalt Sie sind beabsichtigen, laden
InformationsquelleAutor drzaus
-1

Am besten wäre die Einbettung eines kleinen javascript, das zeigt die Schaltfläche, und behandelt das 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);
  }
```
Nun kann der client dies tun:
```
<div id="app"></div>
<script src="yourscript.js"></script>
<script>
 Yourprogramsnestart("app");
 </script>
```
aber wie, um die Größe des iframe, so dass es deckt den Bereich der chat-Fenster und können durch das klicken auf die Seite für die Bereich nicht abgedeckt werden?
Warum funktioniert der iframe werden müssen, um auf die volle Größe? Konnte nicht Sie es die Größe (mit javascript)?
Möglicherweise haben Sie einen Blick auf davidjbradshaw.github.io/iframe-resizer

InformationsquelleAutor Jonas Wilms
-1

Dies ist sehr einfach und schnell. Fügen Sie einfach eine id zu iframe und css setze pointer-events:none, id.

Finden Sie unter arbeiten codepen hier. http://codepen.io/sajiddesigner/pen/ygyjRV

CODE

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;
 }
```
Hoffe, das funktioniert für Sie.

Ihre codepen unterscheidet sich von den angegebenen code in deine Antwort: iframe erstreckt sich nicht auf den "Klick mich" button (als gelb markiert hier) und Sie nicht verwenden pointer-events: none. Wenn Sie versuchen, diesem codepen, die Implementierung des Codes, den Sie erwähnen in Ihrer Antwort, Sie werden sehen, dass der "Klick mich" - button geklickt werden kann, wie gewünscht, aber der chat-Steuerelemente reagieren nicht mehr.

InformationsquelleAutor Optimum Creative

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.