优化网页嵌入

main
PJ568 2 years ago
parent cee7c2bbfb
commit b60d317957

@ -8,27 +8,7 @@
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
<script src="/js/include.js"></script>
<script>
// 获取 URL 参数
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
// 替换 iframe 中的网页
function replaceIframeSource() {
var link = getUrlParameter('link');
if (link) {
var iframe = document.getElementById('myIframe');
iframe.src = link;
}
}
// 页面加载完成时调用替换函数
window.onload = replaceIframeSource;
</script>
<script src="/js/incert.js"></script>
</head>
<body style="display:block;height:calc(100% - 41px)">
<div id="loading">

@ -19,7 +19,6 @@
<div id="list" class="nav_content">
<!-- list_html信息栏初始化、工具表插入、后补内容 -->
</div>
<!-- 顶栏 -->
<div class="nav_menu">
<a class="menu_item_href" href="#"><img class="mainicon" alt="Main_icon" src="/img/icon.svg" />568Tools&nbsp;在线工具箱</a>
<p class="menu_item_href">|</p>
@ -51,11 +50,12 @@
<li id="rcb_t4">&nbsp;前进</li>
<li id="rcb_t5">&nbsp;重载</li>
<li id="rcb_t6">🆕&nbsp;新标签页打开</li>
<li style="display:none" id="rcb_t7">📖&nbsp;在页内页打开</li>
<!-- <li style="display:none" id="rcb_t7">📖&nbsp;在页内页打开</li> -->
</ul>
</body>
</html>
<script src="/lib/js/api.js"></script>
<script src="/js/popup.js"></script>
<script src="/js/openLink.js"></script>
<script src="/js/contextmenu.js"></script>
<script src="/js/contextmenu.js"></script>
<script src="/js/incert.js"></script>

@ -49,9 +49,8 @@ rightMenu.addEventListener('click', function (e) {
window.open(url);
}
break;
case "rcb_t7":
openBtnLink();
break;
// case "rcb_t7":
// break;
default:
console.error(e.target.id);
break;

@ -0,0 +1,20 @@
// 获取 URL 参数
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
// 替换 iframe 中的网页并聚焦视角
function replaceIframeSource() {
var link = getUrlParameter('link');
if (link) {
var iframe = document.getElementById('myIframe');
iframe.src = link;
iframe.scrollIntoView({ behavior: 'smooth' });
}
}
// 页面加载完成时调用替换函数
window.onload = replaceIframeSource;

@ -7,12 +7,12 @@ document.onreadystatechange=function () {
function loadingFade() {
var opacity=1;
const position = document.querySelector('#loading');
//var loadingPage=document.getElementById('loading');
// var loadingPage=document.getElementById('loading');
var loadingBackground=document.getElementById('loading_bg');
var time=setInterval(function () {
if (opacity<=0){
clearInterval(time);
//loadingPage.remove();
// loadingPage.remove();
// $('#loading').remove();
position.style.display = 'none';
}

@ -1,17 +1,8 @@
function openLink () {
var iframe = document.getElementById("myFrame");
var iframe = document.getElementById("myIframe");
var iframeSrc = iframe.getAttribute("src");
encode_and_open (iframeSrc)
}
function openBtnLink () {
var a = document.closest ('a');
var aSrc = a.getAttribute ("src");
var encodedaSrc = encodeURIComponent (aSrc);
var url = "/incert/?link=" + encodedaSrc;
document.querySelector('#myFrame').src = url;
document.querySelector('#myFrame').scrollIntoView({ behavior: 'smooth' });
}
function encode_and_open (event) {
var encodedSrc = encodeURIComponent (event);
var link = "/incert/?link=" + encodedSrc;

@ -65,7 +65,7 @@ function initData(){
}
// 后补
nav_html+=`<a href="#0" target="_self">页内页</a><a href="#-1" target="_self">项目贡献者</a><a href="#-2" target="_self">Star&nbsp;历史</a>`
list_html+=`<div id="0" class="item"><h2>页内页</h2><div class="child"><iframe title="incert" loading="lazy" id="myFrame" src="/help.html" class="page"></iframe><a style="cursor:pointer" onclick="openLink()" target="_self">进入页面</a></div></div><div id="-1" class="item"><h2>项目贡献者</h2><div class="child"><a class="contri" href="https://github.com/PJ-568/568tools/graphs/contributors" target="_blank"><img alt="贡献者的头像图片" loading="lazy" src="https://contrib.rocks/image?repo=PJ-568/568tools"/></a></div></div><div id="-2" class="item"><h2>Star&nbsp;历史</h2><div class="child"><img alt="Star&nbsp;历史" loading="lazy" class="incert" src="https://api.star-history.com/svg?repos=PJ-568/568tools&type=Date"/></div></div><div class="item"><a class="ota" href="#">↑↑&nbsp;&nbsp;&nbsp;&nbsp;返回页顶&nbsp;&nbsp;&nbsp;&nbsp;↑↑</a></div>`
list_html+=`<div id="0" class="item"><h2>页内页</h2><div class="child"><iframe title="incert" loading="lazy" id="myIframe" src="/help.html" class="page"></iframe><a style="cursor:pointer" onclick="openLink()" target="_self">进入页面</a></div></div><div id="-1" class="item"><h2>项目贡献者</h2><div class="child"><a class="contri" href="https://github.com/PJ-568/568tools/graphs/contributors" target="_blank"><img alt="贡献者的头像图片" loading="lazy" src="https://contrib.rocks/image?repo=PJ-568/568tools"/></a></div></div><div id="-2" class="item"><h2>Star&nbsp;历史</h2><div class="child"><img alt="Star&nbsp;历史" loading="lazy" class="incert" src="https://api.star-history.com/svg?repos=PJ-568/568tools&type=Date"/></div></div><div class="item"><a class="ota" href="#">↑↑&nbsp;&nbsp;&nbsp;&nbsp;返回页顶&nbsp;&nbsp;&nbsp;&nbsp;↑↑</a></div>`
// 后补结束
nav.innerHTML=nav_html;
list.innerHTML=list_html;

@ -4,7 +4,7 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js/loading.js"></script>
<title>568Tools&nbsp;|&nbsp;管理</title>
<title>568Tools&nbsp;|&nbsp;服务器后台</title>
<link rel="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css">
<script src="/js/include.js"></script>

Loading…
Cancel
Save