cxykevin
/
sacn_comments
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成iframe适配，支持js插入

This commit is contained in:
cxykevin 2024-09-11 22:42:07 +08:00
parent 7bb80e84f6
commit 06cad663e0
5 changed files with 182 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -38,3 +38,4 @@ venv.bak/
idea/ idea/
# etc # etc
config.toml

18
debug/test.html Normal file
View File

@ -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>

7
server/main.py
View File

@ -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

11
src/loader.js Normal file
View File

@ -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;
}

25
src/page.html
View File

@ -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,6 +148,7 @@
</head> </head>
<body> <body>
<div class="root">
<div id="comment_tmpl" class="hides"> <!-- 评论模板 --> <div id="comment_tmpl" class="hides"> <!-- 评论模板 -->
<mdui-card variant="outlined" class="comment-card"> <mdui-card variant="outlined" class="comment-card">
<div class="comment-user"> <!-- 用户 --> <div class="comment-user"> <!-- 用户 -->
@ -175,8 +185,8 @@
<div class="show-more-card"> <!-- 显示更多 --> <div class="show-more-card"> <!-- 显示更多 -->
<mdui-chip class="show-more-chip" elevated onclick="next_page()">点我显示更多</mdui-chip> <mdui-chip class="show-more-chip" elevated onclick="next_page()">点我显示更多</mdui-chip>
</div> </div>
</body> </div>
<script> <script>
setTimeout(function () { setTimeout(function () {
var hashs = window.location.hash var hashs = window.location.hash
if (hashs !== "") { if (hashs !== "") {
@ -219,6 +229,13 @@
document.getElementById("insert_pos").insertAdjacentHTML('beforebegin', virtualelem.innerHTML); document.getElementById("insert_pos").insertAdjacentHTML('beforebegin', virtualelem.innerHTML);
comment_id++; 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) { function show_more(ids) {
if (document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.contains("comment-show-all")) { if (document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.contains("comment-show-all")) {
@ -272,6 +289,8 @@
xhr.send(); xhr.send();
} }
next_page() next_page()
</script> </script>
</body>
</html> </html>