写一个兼容微信浏览器的浮窗获取外部连接 渲染在页面的html代码
时间: 2023-12-18 08:02:19 浏览: 27
好的,以下是一个简单的 HTML 代码,实现了在微信浏览器中点击按钮弹出浮窗并加载外部链接:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮窗获取外部链接</title>
<style>
/* 浮窗样式 */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
transform: translate(-50%, -50%);
background-color: #fff;
z-index: 9999;
overflow: auto;
}
/* 关闭按钮样式 */
#close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 浮动按钮 -->
<button id="floatBtn">获取外部链接</button>
<!-- 浮窗 -->
<div id="popup">
<div id="close">关闭</div>
<iframe id="frame" frameborder="0"></iframe>
</div>
<!-- JavaScript 代码 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
// 点击按钮显示浮窗
$('#floatBtn').click(function() {
// 获取当前页面链接并发送到后台处理
var url = window.location.href;
$.get('/getExternalLink?url=' + encodeURIComponent(url), function(data) {
// 将后台返回的 HTML 片段渲染到浮窗中
$('#frame').attr('srcdoc', data);
// 显示浮窗
$('#popup').show();
});
});
// 点击关闭按钮关闭浮窗
$('#close').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>
```
这段代码中使用了 jQuery 库来简化 JavaScript 代码,同时使用了 iframe 元素来加载外部链接。在点击按钮时,会将当前页面链接发送到后台处理,并将后台返回的 HTML 片段渲染到浮窗中。在浮窗中添加了一个关闭按钮,点击该按钮可以关闭浮窗。