完成iframe适配，支持js插入
This commit is contained in:
parent
7bb80e84f6
commit
06cad663e0
|
|
@ -37,4 +37,5 @@ venv.bak/
|
||||||
# IDEs and editors
|
# IDEs and editors
|
||||||
idea/
|
idea/
|
||||||
|
|
||||||
# etc
|
# etc
|
||||||
|
config.toml
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Test Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="sacn_comments"></div>
|
||||||
|
<script src="http://127.0.0.1:8020/loader.js"></script>
|
||||||
|
<script>
|
||||||
|
load_comments("/test")
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -125,9 +125,14 @@ async def init(key: str):
|
||||||
return 0
|
return 0
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/loader.js")
|
||||||
|
async def loader():
|
||||||
|
return templates.TemplateResponse("loader.js", {"request": {}})
|
||||||
|
|
||||||
|
|
||||||
@app.get("/{route:path}")
|
@app.get("/{route:path}")
|
||||||
async def show(route: str = "", session: Annotated[str | None, Cookie()] = None):
|
async def show(route: str = "", session: Annotated[str | None, Cookie()] = None):
|
||||||
if (await check_token(session) != ""):
|
if (session is not None and await check_token(session) != ""):
|
||||||
islogin = 1
|
islogin = 1
|
||||||
else:
|
else:
|
||||||
islogin = 0
|
islogin = 0
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
if (event.data.sacn_height) {
|
||||||
|
const iframe = document.getElementById('sacn_comments');
|
||||||
|
iframe.style.height = event.data.sacn_height + 'px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function load_comments(route) {
|
||||||
|
var tmpl = `<iframe src="http://127.0.0.1:8020` + route + `" frameborder="0" scrolling="no" width="100%" height="800px"
|
||||||
|
id="sacn_comments">Comments</iframe>`
|
||||||
|
document.getElementById('sacn_comments').outerHTML = tmpl;
|
||||||
|
}
|
||||||
271
src/page.html
271
src/page.html
|
|
@ -18,6 +18,15 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-card {
|
.main-card {
|
||||||
|
|
@ -139,139 +148,149 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="comment_tmpl" class="hides"> <!-- 评论模板 -->
|
<div class="root">
|
||||||
<mdui-card variant="outlined" class="comment-card">
|
<div id="comment_tmpl" class="hides"> <!-- 评论模板 -->
|
||||||
<div class="comment-user"> <!-- 用户 -->
|
<mdui-card variant="outlined" class="comment-card">
|
||||||
<mdui-avatar class="comment-user-avatar"></mdui-avatar> <!-- 头像 -->
|
<div class="comment-user"> <!-- 用户 -->
|
||||||
<span class="comment-user-name"></span> <!-- 用户名 -->
|
<mdui-avatar class="comment-user-avatar"></mdui-avatar> <!-- 头像 -->
|
||||||
<!-- <mdui-button variant="text" class="likebtn" icon="star">0</mdui-button> 点赞按钮 -->
|
<span class="comment-user-name"></span> <!-- 用户名 -->
|
||||||
<mdui-button-icon class="morebtn" variant="outlined" icon="expand_more"></mdui-button-icon>
|
<!-- <mdui-button variant="text" class="likebtn" icon="star">0</mdui-button> 点赞按钮 -->
|
||||||
<!-- 展开按钮 -->
|
<mdui-button-icon class="morebtn" variant="outlined" icon="expand_more"></mdui-button-icon>
|
||||||
</div>
|
<!-- 展开按钮 -->
|
||||||
<div class="comment-text"> <!-- 评论内容 -->
|
</div>
|
||||||
<span class="comment-text-span"></span>
|
<div class="comment-text"> <!-- 评论内容 -->
|
||||||
</div>
|
<span class="comment-text-span"></span>
|
||||||
|
</div>
|
||||||
|
</mdui-card>
|
||||||
|
</div>
|
||||||
|
<mdui-card class="main-card" variant="outlined"> <!-- 发送部分 -->
|
||||||
|
<mdui-card variant="filled" class="top-card">
|
||||||
|
<span class="title" id="comments_show_cnt">共 0 条评论</span> <!-- 评论数 -->
|
||||||
|
<mdui-button variant="filled" class="send-btn" onclick="send_msg()">发送</mdui-button>
|
||||||
|
</mdui-card>
|
||||||
|
{% if islogin==1 %}
|
||||||
|
<!-- 输入 -->
|
||||||
|
<mdui-text-field variant="outlined" rows=5 label="评论" class="input-card" id="input-card"></mdui-text-field>
|
||||||
|
{% else %}
|
||||||
|
<!-- 登录 -->
|
||||||
|
<mdui-card class="login-card" id="login-card">
|
||||||
|
<div class="info-card">
|
||||||
|
<mdui-chip class="info-card-text" onclick="login()">登录</mdui-chip>
|
||||||
|
<span class="info-card-text">进行评论</span>
|
||||||
|
</div>
|
||||||
|
</mdui-card>
|
||||||
|
{% endif %}
|
||||||
</mdui-card>
|
</mdui-card>
|
||||||
|
<div id="insert_pos" class="hides"></div> <!-- 插入位置 -->
|
||||||
|
<div class="show-more-card"> <!-- 显示更多 -->
|
||||||
|
<mdui-chip class="show-more-chip" elevated onclick="next_page()">点我显示更多</mdui-chip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<mdui-card class="main-card" variant="outlined"> <!-- 发送部分 -->
|
<script>
|
||||||
<mdui-card variant="filled" class="top-card">
|
|
||||||
<span class="title" id="comments_show_cnt">共 0 条评论</span> <!-- 评论数 -->
|
|
||||||
<mdui-button variant="filled" class="send-btn" onclick="send_msg()">发送</mdui-button>
|
|
||||||
</mdui-card>
|
|
||||||
{% if islogin==1 %}
|
|
||||||
<!-- 输入 -->
|
|
||||||
<mdui-text-field variant="outlined" rows=5 label="评论" class="input-card" id="input-card"></mdui-text-field>
|
|
||||||
{% else %}
|
|
||||||
<!-- 登录 -->
|
|
||||||
<mdui-card class="login-card" id="login-card">
|
|
||||||
<div class="info-card">
|
|
||||||
<mdui-chip class="info-card-text" onclick="login()">登录</mdui-chip>
|
|
||||||
<span class="info-card-text">进行评论</span>
|
|
||||||
</div>
|
|
||||||
</mdui-card>
|
|
||||||
{% endif %}
|
|
||||||
</mdui-card>
|
|
||||||
<div id="insert_pos" class="hides"></div> <!-- 插入位置 -->
|
|
||||||
<div class="show-more-card"> <!-- 显示更多 -->
|
|
||||||
<mdui-chip class="show-more-chip" elevated onclick="next_page()">点我显示更多</mdui-chip>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
setTimeout(function () {
|
|
||||||
var hashs = window.location.hash
|
|
||||||
if (hashs !== "") {
|
|
||||||
var exp = /(?<=#access_token\=).*(?=&token_type)/g
|
|
||||||
var res = hashs.match(exp)
|
|
||||||
if (res != null) {
|
|
||||||
var key = res[0]
|
|
||||||
var xhr = new XMLHttpRequest()
|
|
||||||
xhr.open('post', '/api/login?apikey=' + key);
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
||||||
window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname
|
|
||||||
}
|
|
||||||
}
|
|
||||||
xhr.send()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
var old_href = window.location.href
|
|
||||||
var logined = Number("{{islogin}}")
|
|
||||||
function login() {
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
window.location.href = "{{ui.link}}/login?redirect_url=" + old_href
|
var hashs = window.location.hash
|
||||||
}, 100);
|
if (hashs !== "") {
|
||||||
}
|
var exp = /(?<=#access_token\=).*(?=&token_type)/g
|
||||||
var page = 1
|
var res = hashs.match(exp)
|
||||||
var comment_id = 1
|
if (res != null) {
|
||||||
function add(datas) {
|
var key = res[0]
|
||||||
var virtualelem = document.createElement('div');
|
var xhr = new XMLHttpRequest()
|
||||||
virtualelem.innerHTML = document.getElementById("comment_tmpl").innerHTML;
|
xhr.open('post', '/api/login?apikey=' + key);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
for (var i = 0; i < datas.comments.length; i++) {
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||||
data = datas.comments[i];
|
window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname
|
||||||
virtualelem.getElementsByClassName("comment-user-avatar")[0].innerHTML = data.avatar;
|
}
|
||||||
virtualelem.getElementsByClassName("comment-user-name")[0].innerHTML = data.username;
|
}
|
||||||
virtualelem.getElementsByClassName("comment-text-span")[0].innerHTML = data.comment;
|
xhr.send()
|
||||||
virtualelem.getElementsByClassName("comment-card")[0].setAttribute("id", "comment-card-id-" + comment_id.toString());
|
|
||||||
virtualelem.getElementsByClassName("morebtn")[0].setAttribute("onclick", "show_more(\"" + "comment-card-id-" + comment_id.toString() + "\")")
|
|
||||||
document.getElementById("insert_pos").insertAdjacentHTML('beforebegin', virtualelem.innerHTML);
|
|
||||||
comment_id++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function show_more(ids) {
|
|
||||||
if (document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.contains("comment-show-all")) {
|
|
||||||
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.remove("comment-show-all")
|
|
||||||
} else {
|
|
||||||
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.add("comment-show-all")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function send_msg() {
|
|
||||||
if (document.getElementById("input-card").value.length < 10) {
|
|
||||||
window.parent.alert("评论内容不能少于10个字")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (logined == 0) {
|
|
||||||
login()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.open("POST", "/api/send_comment?route={{route}}");
|
|
||||||
var form = new FormData();
|
|
||||||
document.getElementsByClassName("send-btn")[0].setAttribute("loading", "true")
|
|
||||||
form.append("text", document.getElementById("input-card").value);
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
||||||
var obj = JSON.parse(xhr.responseText);
|
|
||||||
if (obj.code == 1) {
|
|
||||||
window.parent.alert(obj.msg)
|
|
||||||
document.getElementsByClassName("send-btn")[0].removeAttribute("loading")
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
location.reload()
|
}
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
var old_href = window.location.href
|
||||||
|
var logined = Number("{{islogin}}")
|
||||||
|
function login() {
|
||||||
|
setTimeout(function () {
|
||||||
|
window.location.href = "{{ui.link}}/login?redirect_url=" + old_href
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
var page = 1
|
||||||
|
var comment_id = 1
|
||||||
|
function add(datas) {
|
||||||
|
var virtualelem = document.createElement('div');
|
||||||
|
virtualelem.innerHTML = document.getElementById("comment_tmpl").innerHTML;
|
||||||
|
|
||||||
|
for (var i = 0; i < datas.comments.length; i++) {
|
||||||
|
data = datas.comments[i];
|
||||||
|
virtualelem.getElementsByClassName("comment-user-avatar")[0].innerHTML = data.avatar;
|
||||||
|
virtualelem.getElementsByClassName("comment-user-name")[0].innerHTML = data.username;
|
||||||
|
virtualelem.getElementsByClassName("comment-text-span")[0].innerHTML = data.comment;
|
||||||
|
virtualelem.getElementsByClassName("comment-card")[0].setAttribute("id", "comment-card-id-" + comment_id.toString());
|
||||||
|
virtualelem.getElementsByClassName("morebtn")[0].setAttribute("onclick", "show_more(\"" + "comment-card-id-" + comment_id.toString() + "\")")
|
||||||
|
document.getElementById("insert_pos").insertAdjacentHTML('beforebegin', virtualelem.innerHTML);
|
||||||
|
comment_id++;
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
window.location.hash = "h=" + document.getElementsByClassName("root")[0].offsetHeight;
|
||||||
|
if (window.parent) {
|
||||||
|
window.parent.postMessage({ sacn_height: document.getElementsByClassName("root")[0].offsetHeight }, '*');
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
}
|
||||||
|
function show_more(ids) {
|
||||||
|
if (document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.contains("comment-show-all")) {
|
||||||
|
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.remove("comment-show-all")
|
||||||
|
} else {
|
||||||
|
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.add("comment-show-all")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
xhr.send(form);
|
function send_msg() {
|
||||||
}
|
if (document.getElementById("input-card").value.length < 10) {
|
||||||
function next_page() {
|
window.parent.alert("评论内容不能少于10个字")
|
||||||
var xhr = new XMLHttpRequest();
|
return
|
||||||
xhr.open("GET", "/api/comments?route={{route}}&page=" + page);
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
||||||
var obj = JSON.parse(xhr.responseText);
|
|
||||||
add(obj);
|
|
||||||
document.getElementById("comments_show_cnt").innerHTML = "共 " + obj.count + " 条评论";
|
|
||||||
|
|
||||||
if (page * 5 >= obj.count) {
|
|
||||||
document.getElementsByClassName("show-more-card")[0].classList.add("hides")
|
|
||||||
}
|
|
||||||
page++;
|
|
||||||
}
|
}
|
||||||
|
if (logined == 0) {
|
||||||
|
login()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("POST", "/api/send_comment?route={{route}}");
|
||||||
|
var form = new FormData();
|
||||||
|
document.getElementsByClassName("send-btn")[0].setAttribute("loading", "true")
|
||||||
|
form.append("text", document.getElementById("input-card").value);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
|
var obj = JSON.parse(xhr.responseText);
|
||||||
|
if (obj.code == 1) {
|
||||||
|
window.parent.alert(obj.msg)
|
||||||
|
document.getElementsByClassName("send-btn")[0].removeAttribute("loading")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
location.reload()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send(form);
|
||||||
}
|
}
|
||||||
xhr.send();
|
function next_page() {
|
||||||
}
|
var xhr = new XMLHttpRequest();
|
||||||
next_page()
|
xhr.open("GET", "/api/comments?route={{route}}&page=" + page);
|
||||||
</script>
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
|
var obj = JSON.parse(xhr.responseText);
|
||||||
|
add(obj);
|
||||||
|
document.getElementById("comments_show_cnt").innerHTML = "共 " + obj.count + " 条评论";
|
||||||
|
|
||||||
|
if (page * 5 >= obj.count) {
|
||||||
|
document.getElementsByClassName("show-more-card")[0].classList.add("hides")
|
||||||
|
}
|
||||||
|
page++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
next_page()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue