所以，一开始我没有任何问题。 看起来效果很好。 我加载脚本，它只提供了“打开聊天”选项。
现在，它加载已打开的整个聊天窗口，但不加载聊天的内容页面。 我必须单击“退出聊天”和“打开聊天”才能真正打开内容。
在单击“打开聊天”之前，我什至不希望打开内容窗口。
（为了方便起见，我暂时将 css 作为样式标签保留在网页中。通常，我在头部有一个样式表 href）
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('http://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('http://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</style>
</head>
<body>
<button id="openForumBtn" class="box">open chat</button>
<div id="overlay"></div>
<div id="forumWindow" class="box">
<iframe id="forumFrame" src="" class="prettyFrame"></iframe>
<button id="closeForumBtn" class="button">exit chat</button>
</div>
<script>
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/'; // Replace with your forum URL
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
</script>
</body>
</html>
CSS
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('http://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('http://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
js
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/';
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
将 display: none 添加到 #forumWindow 作为初始值可以解决您的问题
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
display: none; // here
}