利用js创建打开一个右下角悬浮窗口网页,默认右下角打开一个悬浮窗口，可以使用以下 JavaScript 代码在页面右下角创建一个悬浮的 iframe 窗口，并给他添加一个红色的关闭按钮：
<script>
// 创建悬浮 iframe 窗口
function createFloatingIframe() {
// 创建外部容器 div
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.bottom = '20px';
container.style.right = '20px';
container.style.width = '500px';
container.style.height = '600px';
container.style.zIndex = '1000'; // 确保在最上层显示
container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
// 创建 iframe 元素
const iframe = document.createElement('iframe');
iframe.src = 'https://heiqw.com'; // 设置默认加载的 URL
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
// 创建关闭按钮
const closeButton = document.createElement('button');
closeButton.innerHTML = 'X';
closeButton.style.position = 'absolute';
closeButton.style.top = '5px';
closeButton.style.right = '5px';
closeButton.style.backgroundColor = 'red';
closeButton.style.color = 'white';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '50%';
closeButton.style.width = '20px';
closeButton.style.height = '20px';
closeButton.style.fontSize = '14px';
closeButton.style.cursor = 'pointer';
closeButton.style.padding = '0';
closeButton.style.lineHeight = '20px'; // 让 X 居中
// 添加关闭按钮点击事件
closeButton.onclick = function() {
container.style.display = 'none'; // 隐藏整个 container（包括 iframe 和按钮）
};
// 将 iframe 和关闭按钮添加到外部容器中
container.appendChild(iframe);
container.appendChild(closeButton);
// 将外部容器添加到 body 中
document.body.appendChild(container);
}
// 调用函数创建悬浮 iframe
createFloatingIframe();
</script>代码解释：
-
外部容器 div：我们创建了一个 div 元素（container），它包裹了 iframe 和关闭按钮。这样可以更方便地控制它们的布局和位置。
-
设置 container 的宽度和高度为 300px 和 200px，并且将它固定在页面的右下角。
-
关闭按钮的行为：当点击关闭按钮时，隐藏的是整个 container，包括 iframe 和按钮本身。
-
iframe：iframe 本身被放置在外部容器内，占据整个容器的宽度和高度（100%）。
效果：
- 你会看到页面右下角出现一个悬浮的 iframe，并且包含一个红色的关闭按钮 X，按钮位于右上角。
- 点击关闭按钮后，整个容器会被隐藏，包括 iframe 和按钮。
- 这样做可以确保关闭按钮始终在 iframe 上方显示，并且能正确触发隐藏行为。
代码解释：
创建 iframe 元素：
-
使用 document.createElement('iframe') 动态创建一个 iframe 元素。
-
设置了 src 属性为 http://baidu.com，你可以根据需要更改为其他 URL。
-
设置 iframe 的样式，使其固定在右下角，并且有一定的宽度和高度。
创建关闭按钮：
-
使用 document.createElement('button') 创建一个按钮并设置为红色的圆形按钮。
-
为按钮添加点击事件，点击时隐藏 iframe。
添加到页面：
- 使用 document.body.appendChild(iframe) 将 iframe 元素添加到页面中。
效果：
- 页面右下角会显示一个包含 http://baidu.com 链接的 iframe 窗口。
- iframe 窗口中包含一个关闭按钮，点击按钮后会隐藏 iframe。
- 这个实现是一个简单的悬浮窗口，满足你提到的需求。如果你想对窗口的样式和行为进行更多自定义，可以根据需要调整 CSS 和 JavaScript 设置。