Comment superposer un iframe et autoriser le clic
Je veux pouvoir mettre un bouton "Chat maintenant" qui fait apparaître une fenêtre de chat dans n'importe quelle page Web.
Je peux ajouter le bouton "Chat Now" en utilisant JavaScript, mais cela hérite de CSS dans la page et le rend mauvais. Je veux donc le mettre dans sa propre page et l'intégrer dans n'importe quelle page Web en utilisant un iframe.
C'est aussi proche que possible. Il affiche l'iframe en haut de la page, mais ne permet pas aux clics de passer. Comment puis-je rendre le bouton "Click Me" cliquable?
Je vois que la plupart des discussions en direct le font, cela doit donc être possible.
<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>
J'espère que c'est possible sans avoir à dimensionner l'iframe exactement, mais peut-être que ce n'est pas le cas? Il est étrange que l'iframe puisse afficher la page Web derrière elle, mais ne permet pas de cliquer dessus.
z-index ne fonctionne que sur les éléments positionnés (position: absolue, position: relative ou position: fixe)
Assurez-vous donc de donner une position à votre conteneur de boutons div
De: https://developer.mozilla.org/en/docs/Web/CSS/z-index
La propriété z-index spécifie l'ordre z d'un élément positionné et de ses descendants. Lorsque les éléments se chevauchent, l'ordre z détermine lequel recouvre l'autre. Un élément avec un indice z plus grand couvre généralement un élément avec un indice inférieur.
Pour une boîte positionnée (c'est-à-dire avec une position autre que statique), la propriété z-index spécifie:
Niveau de pile de la boîte dans le contexte d'empilement actuel. Indique si la boîte établit un contexte d'empilement local.
Et de http://www.w3schools.com/cssref/pr_pos_z-index.asp
Définition et utilisation La propriété z-index spécifie l'ordre de pile d'un élément.
Un élément avec un ordre de pile supérieur est toujours devant un élément avec un ordre de pile inférieur.
Remarque: l'index z ne fonctionne que sur les éléments positionnés (position: absolue, position: relative ou position: fixe).
Je suis un peu confus quant à la raison pour laquelle vous voulez que l'iFrame avec le chat couvre tout l'écran lorsque le chat lui-même n'occupe qu'une petite section en bas à droite de la page. Les éléments avec un ordre de pile supérieur sont toujours placés devant les éléments avec un ordre de pile inférieur ... donc pour réaliser ce que vous essayez de faire avec un iFrame de taille 100%, 100% nécessitera plus que légèrement une solution de contournement longue.
"Oui, la méthode suivante implique de manipuler la taille exacte de l'iframe"
J'ai fait quelque chose comme ça il y a quelques mois et j'ai simplement placé l'iFrame sur la page en utilisant le positionnement absolu. Étant donné que la plupart de ces fenêtres "Live Chat" permettent le défilement de son contenu, je viens de travailler avec deux états/hauteurs pour l'iFrame. Les deux hauteurs de l'iFrame doivent correspondre aux hauteurs d'ouverture et de fermeture de la fenêtre de discussion contenue dans l'iFrame.
Maintenant .. lorsque l'utilisateur clique sur le bouton Chat Now ... l'iFrame appellera une fonction de sa fenêtre parent qui manipulera la hauteur de l'iFrame. * Assurez-vous simplement d'ajouter une balise ID à l'iFrame pour permettre aux fonctions OPEN et CLOSE (dans la fenêtre parent) de pouvoir manipuler la hauteur de l'iFrame.
Cela a bien fonctionné pour moi!
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 à placer dans la fenêtre parent
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
Choses à faire sur la page qui est placée via iFrame: Il ne vous reste plus qu'à attacher les événements onClick à les boutons dans le Chat-GUI qui maximise et minimise la fenêtre de chat.
Par exemple: ajoutez un écouteur d'événements au bouton "CHAT NOW" qui appelle la fonction open_LiveChatWindow () de la fenêtre parente.
Vous pouvez appeler les fonctions dans la fenêtre parent comme ceci: parent.open_LiveChatWindow();
J'espère que vous avez trouvé cette solution utile.
J'ai changé le z-index du bouton à 9999 avec la position relative, et cela permet aux clics de passer.
Cependant, comme l'iframe incorpore une page d'un domaine différent (puisque j'étais sur plunker), les clics n'ont pas pu être propagés avant le "Chat maintenant", en raison de même sécurité d'origine
Essayez ceci 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>Ce que vous déclarez (couverture à 100% si le cadre n'interfère pas avec les éléments en dessous) n'est pas pratique et ne l'a pas été depuis des années, du moins selon certaines autres questions sans réponse SO questions:
- Autoriser le clic à passer par iFrame au contenu situé derrière
- Cliquez sur un iframe flottant transparent
C'est un peu comme clickjacking .
Tout ce qui est positionné sur autre chose deviendra la cible du clic et "volera" toute l'interaction. La même chose se produit avec les modaux contextuels (divs) qui "fondent" l'arrière-plan de la page Web avec un div translucide de 100% de largeur. Vous devez capturer les clics de souris dans l'élément superposé (iframe) et repasser la position sur la page principale et déclencher un clic sur l'élément approprié à cette position.
Alternatives:
- si vous ne vous souciez que de l'interactivité du bouton - pouvez-vous faire en sorte que le bouton clique incorpore l'iframe à la place? Cela ne permettra toujours pas d'interagir avec la page Web située derrière.
- Ne faites pas l'iframe à 100% - spécifiez simplement la taille pour l'adapter au contenu que vous avez l'intention de charger
Si interpréter correctement la question, vous pouvez utiliser une variante d'approche à n clic sur un bouton peut-il provoquer un événement dans iframe? Ajuster width, height of iframe et button éléments pour répondre à des exigences spécifiques.
$(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/
Le moyen le plus simple consiste à utiliser la position et le z-index pour les deux éléments. L'index z définira la "couche" à laquelle appartient un élément. L'élément avec un z-index plus élevé sera affiché avant un autre. L'index Z ne fonctionne qu'avec des éléments positionnés, vous devez donc positionner à la fois le bouton et l'iframe. Ça devrait ressembler à ça:
<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>
Une autre façon d'obtenir le même résultat sans utiliser z-index est de changer l'ordre des éléments dans le code. Puisque le navigateur mettra le dernier élément mentionné au-dessus de l'autre. Dans ce cas, vous devez définir la position du bouton sur absolu (qui fera référence à la position dans l'élément parent qui est le corps) et définir les valeurs supérieure et gauche:
<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>