Cum să suprapui un iframe și să permiți click prin (Programare, Javascript, Html, Css, Iframe)

James a intrebat.
a intrebat.

Vreau să pot pune un buton „Chat Now” care să deschidă o fereastră de chat în interiorul oricărei pagini web.

Pot adăuga butonul „Chat Now” folosind JavaScript, dar asta moștenește css-ul din pagină și face să arate rău. Așadar, vreau să îl pun în propria pagină și să îl încorporez în orice pagină web folosind un iframe.

Aceasta este cea mai apropiată posibilitate pe care o am. Afișează iframe-ul în partea de sus a paginii, dar nu permite trecerea clicurilor. Cum pot face ca butonul „Click Me” să poată fi apăsat?

Văd că majoritatea chat-urilor live fac acest lucru, deci trebuie să fie posibil.

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

Să sperăm că este posibil fără a fi nevoie să dimensionați exact iframe-ul, dar poate… nu este? Este ciudat că iframe-ul poate afișa pagina web din spatele său, dar nu poate permite să se facă clic pe ea.

Comentarii

  • Aruncați o privire la window.postMessage. și majoritatea serviciilor permit utilizatorilor să integreze un javascript… –  > Por Jonas Wilms.
  • înfășurați ambele într-un container și faceți ca containerul să fie de dimensiune completă și faceți ca poziția butonului să fie absolută, de asemenea, –  > Por charlietfl.
  • Este necesar să aveți posibilitatea de a face clic iframe element? Sau stil button pentru a acoperi iframe și la click din button aplică evenimentul la iframe? –  > Por guest271314.
  • Scopul este de a încorpora o fereastră de chat într-o pagină web normală folosind un iframe, butonul „Click Me” este doar un exemplu de pagină web normală pe care ar trebui să se poată da click chiar dacă are iframe-ul în ea. –  > Por James.
8 răspunsuri
Neri Barakat

z-index funcționează numai pe elemente poziționate (position:absolute, position:relative sau position:fixed)

Deci, asigurați-vă că dați containerului dvs. div de buton o poziție

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

Proprietatea z-index specifică ordinea z a unui element poziționat și a descendenților săi. Atunci când elementele se suprapun, ordinul z determină care dintre ele îl acoperă pe celălalt. Un element cu un indice z mai mare acoperă, în general, un element cu un indice mai mic.

Pentru o casetă poziționată (adică una cu orice altă poziție decât cea statică), proprietatea z-index specifică:

Nivelul de stivuire al casetei în contextul actual de stivuire. dacă caseta stabilește sau nu un context local de stivuire.

Și de la http://www.w3schools.com/cssref/pr_pos_z-index.asp

Definiție și utilizare Proprietatea z-index specifică ordinea de stivuire a unui element.

Un element cu o ordine de stivuire mai mare este întotdeauna în fața unui element cu o ordine de stivuire mai mică.

Notă: z-index funcționează numai pe elementele poziționate (position:absolute, position:relative sau position:fixed).

Comentarii

  • butonul este doar un exemplu de pagină web în care să fie încorporat, „orice” din pagina web ar trebui să poată fi apăsat –  > Por James.
  • @James da, am înțeles ce vrei să spui, dar cum ar putea orice lucru existent pe pagină să fie clickabil în timp ce iframe-ul acoperă toată pagina cu 100% lățime, înălțime? pentru ca lucrurile să fie clickabile ar trebui să pui iframe-ul în spate sau să-i micșorezi dimensiunea. –  > Por Neri Barakat.
  • dar văd că multe produse de chat live fac acest lucru, își încorporează butonul de chat live „Chat Now” într-un iframe cu lățime/înălțime de 100%, dar cumva lasă totuși clicurile să meargă pe pagină. Trebuie să existe o modalitate de a face acest lucru. –  > Por James.
  • cum adică „puneți iframe-ul în spate”? Iframe-ul adaugă doar butonul și o fereastră de chat cu z-index și poziții fixe în pagina web încadrată -.  > Por James.
  • @James da, văd că este 100% iframe, dar 100% dintr-un div container care are o înălțime și o lățime fixe, deci dimensiunea iframe-ului nu va ieși niciodată în afara div-ului container. –  > Por Neri Barakat.
guest271314

Dacă interpretați Întrebare corect, puteți utiliza o variantă de abordare la Poate un clic pe un buton să provoace un eveniment în iframe? Ajustați width, , height din iframe și button elemente pentru a îndeplini cerința specifică.

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

RawkFist

Cel mai simplu mod este să folosiți poziția și z-index pentru ambele elemente. z-index va defini „stratul” din care face parte un element. Elementul cu un z-index mai mare va fi afișat înaintea altuia. Z-index funcționează numai cu elemente poziționate, prin urmare trebuie să poziționați atât butonul cât și iframe-ul. Ar trebui să arate astfel:

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

O altă modalitate de a obține același rezultat fără a utiliza z-index este de a schimba ordinea elementelor în cod. Deoarece browserul va pune ultimul element menționat deasupra celuilalt. În acest caz, trebuie să setați poziția butonului la absolut (care se va referi la poziția în elementul părinte, care este corpul) și să definiți valorile top și left:

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

Un cod foarte frumos

Sunt puțin confuz de ce doriți ca iFrame-ul cu chat-ul să acopere întregul ecran, când chat-ul în sine ocupă doar o mică secțiune în dreapta jos a paginii. Elementele cu o ordine de stivuire mai mare sunt întotdeauna plasate în fața elementelor cu o ordine de stivuire mai mică… astfel încât pentru a obține ceea ce încercați să faceți cu un iFrame de dimensiune 100% 100% va fi nevoie mai mult decât ușor de o soluție de lucru discutabil de lungă durată.

„Da, următoarea metodă implică manipularea dimensiunii exacte a iframe-ului”

Am făcut ceva asemănător acum câteva luni și am plasat pur și simplu iFrame-ul pe pagină folosind absolute-positioning. Din moment ce majoritatea acelor ferestre de „Live Chat” permit derularea pentru conținutul său, am lucrat doar cu două stări/înălțimi pentru iFrame. Cele două înălțimi ale iFrame trebuie să corespundă înălțimilor de deschidere și de închidere a ferestrei de chat conținute în iFrame.

Acum… când utilizatorul face clic pe butonul Chat Now… iFrame va apela o funcție a ferestrei sale părinte care va manipula înălțimea iFrame-ului. *Asigurați-vă că adăugați o etichetă ID la iFrame pentru a permite funcțiilor OPEN și CLOSE (în fereastra părinte) să poată manipula înălțimea iFrame-ului.

Acest lucru a funcționat bine pentru mine!

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 care trebuie plasat în fereastra părinte

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

Lucruri de făcut pe pagina care este plasată prin iFrame:Acum tot ce trebuie să faceți este să atașați evenimentele onClick la butoanele din Chat-GUI care maximizează și minimizează fereastra de chat.

De exemplu: Adăugați un ascultător de evenimente la butonul „CHAT NOW” care apelează funcția open_LiveChatWindow() a ferestrei părinte.

Puteți apela funcțiile din fereastra părinte în felul următor: parent.open_LiveChatWindow();

Sper că ați găsit această soluție utilă.

Souji

Am schimbat z-indexul butonului la 9999 cu poziție relativă și permite trecerea clicurilor.

Cu toate acestea, deoarece iframe-ul încorporează o pagină din alt domeniu (din moment ce eram pe plunker), clicurile nu s-au putut propaga până la „Chat Now”, din cauza Aceeași securitate de origine

Încercați acest lucru plunker

drzaus

Ceea ce afirmați (iframe cu acoperire 100% care să nu interfereze cu elementele de sub el) nu este practic și nu a fost de ani de zile, cel puțin conform altor întrebări SO fără răspuns:

  • Permiteți clicului să treacă prin iFrame către conținutul din spatele acestuia
  • Click prin iframe-ul plutitor transparent

Este un fel de clickjacking.

Orice lucru poziționat peste altceva va deveni ținta clicului și va „fura” toată interacțiunea. Același lucru se întâmplă și cu modalele pop-up (divs) care „estompează” fundalul paginii web cu un div translucid cu lățimea de 100%. Ar trebui să capturați clicurile de mouse în elementul suprapus (iframe) și să transmiteți poziția înapoi la pagina principală și să faceți ca aceasta să declanșeze clic pe elementul corespunzător din acea poziție.

Alternative:

  • dacă vă pasă doar de interactivitatea butonului – puteți face ca clicul pe buton să încorporeze în schimb iframe-ul? Acest lucru tot nu va permite interacțiunea cu pagina web din spatele ei.
  • Nu faceți ca iframe-ul să fie 100% – specificați doar dimensiunea pentru a-l adapta la conținutul pe care intenționați să-l încărcați.

Optimum Creative

Acest lucru este foarte rapid și ușor. Doar adăugați un id la iframe și în css setați pointer-events:none pentru acel id.

Vedeți codul de lucru aici. http://codepen.io/sajiddesigner/pen/ygyjRV

COD

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

Sper că acest lucru funcționează pentru tine.

Comentarii

  • Codul dvs. este diferit de codul dat în răspunsul dvs.: iframe-ul nu acoperă butonul „Click me” (evidențiat în galben). aici) și nu folosiți pointer-events: none. Dacă încercați acest codepen, , care implementează codul pe care îl menționați în răspunsul dumneavoastră, veți vedea că butonul „Click me” poate fi apăsat, așa cum se dorește, dar controalele de chat nu mai răspund. –  > Por ConnorsFan.
Jonas Wilms

Cel mai bine ar fi să încorporați un mic javascript care să afișeze butonul și să se ocupe de 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);
}

Acum clientul poate face acest lucru:

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

Comentarii

  • dar cum se poate dimensiona iframe-ul astfel încât să acopere zona ferestrei de chat și să permită click pe pagina pentru zona neacoperită? –  > Por James.
  • De ce trebuie ca iframe-ul să fie peste dimensiunea completă? Nu se poate redimensiona (folosind javascript)? –  > Por Jonas Wilms.