我希望能够在任何网页内放置一个“立即聊天”按钮，弹出一个聊天窗口。
我可以使用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可以显示它背后的网页，但不能允许它被点击。
答案 0 :(得分：5)
z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）
因此，请务必将按钮div容器放置一个位置
来自：https://developer.mozilla.org/en/docs/Web/CSS/z-index
z-index属性指定定位元素的z顺序 它的后代。当元素重叠时，z顺序决定哪一个 涵盖了另一个。具有较大z指数的元素通常覆盖一个 较低的元素。
对于定位的框（即，除了之外的任何位置的框） static），z-index属性指定：
当前堆叠上下文中框的堆栈级别。是否 该框建立了一个本地堆叠环境。
来自http://www.w3schools.com/cssref/pr_pos_z-index.asp
定义和用法z-index属性指定堆栈顺序 一个元素。
具有更多堆栈顺序的元素始终位于元素的前面 堆叠顺序较低。
注意：z-index仅适用于定位元素（位置：绝对值， position：relative，或position：fixed）。
答案 1 :(得分：1)
我有点困惑的是，当聊天本身只占据页面右下角的一小部分时，为什么你希望聊天的iFrame覆盖整个屏幕。具有更大堆栈顺序的元素总是放置在具有较低堆栈顺序的元素的前面...因此，要实现您尝试使用大小为100％100％的iFrame所做的事情，将不仅仅需要一个有问题的冗长的解决方法。 / p>
“是的，以下方法确实涉及操纵iframe的确切大小”
几个月前我做了类似的事情，我只是使用绝对定位将iFrame放在页面上。由于大多数“实时聊天”窗口允许滚动其内容，我只使用iFrame的两个状态/高度。 iFrame的两个高度必须与iFrame中包含的聊天窗口的开放和关闭高度相匹配。
现在..当用户点击“立即聊天”按钮时... iFrame将调用其父窗口的一个功能，该功能将操纵iFrame的高度。 *只需确保向iFrame添加ID标签，以允许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();
我希望你发现这个解决方案很有用。
答案 2 :(得分：0)
如果正确解释问题，您可以使用Can a button click cause an event in iframe?调整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);
});
元素的方法变体来满足特定要求
www.example.com/fr/something.php ->www.example.com/something.php?lang=fr
jsfiddle http://jsfiddle.net/2x4xz/11/
答案 3 :(得分：0)
最简单的方法是对两个元素使用position和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>
答案 4 :(得分：0)
我已将按钮的z-index更改为位置相对的9999，并且确实允许点击通过。
但是，由于iframe嵌入了来自不同域的页面（因为我在plunker上），因为Same origin security
，因此点击无法传播到“立即聊天”试试这个plunker
buildTypes {
release {
shrinkResources true
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'),
'proguard-rules.pro'
}
}
答案 5 :(得分：0)
你所声明的内容（100％覆盖iframe不会干扰其下面的元素）是不实际的，并且多年来都没有，至少根据其他一些未解答的SO问题：
有点像clickjacking。
任何定位于其他内容的内容都将成为点击目标并“窃取”所有互动。弹出模式（div s）使用100％宽度的半透明div“淡化”网页背景也会发生同样的事情。您必须在重叠元素（iframe）中捕获鼠标点击并将位置传递回主页并让它触发点击该位置的相应元素。
备选方案：
答案 6 :(得分：-1)
最好的方法是嵌入一个显示按钮的小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>
答案 7 :(得分：-1)
这非常简单快捷。只需向iframe添加一个id，并在css中设置指针 - 事件：无该ID。
请在此处查看codepen。 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;
}
希望这适合你。