优化网页嵌入

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="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css"> <link rel="stylesheet" href="/css/tool_type.css">
<script src="/js/include.js"></script> <script src="/js/include.js"></script>
<script> <script src="/js/incert.js"></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>
</head> </head>
<body style="display:block;height:calc(100% - 41px)"> <body style="display:block;height:calc(100% - 41px)">
<div id="loading"> <div id="loading">

@ -19,7 +19,6 @@
<div id="list" class="nav_content"> <div id="list" class="nav_content">
<!-- list_html信息栏初始化、工具表插入、后补内容 --> <!-- list_html信息栏初始化、工具表插入、后补内容 -->
</div> </div>
<!-- 顶栏 -->
<div class="nav_menu"> <div class="nav_menu">
<a class="menu_item_href" href="#"><img class="mainicon" alt="Main_icon" src="/img/icon.svg" />568Tools&nbsp;在线工具箱</a> <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> <p class="menu_item_href">|</p>
@ -51,11 +50,12 @@
<li id="rcb_t4">&nbsp;前进</li> <li id="rcb_t4">&nbsp;前进</li>
<li id="rcb_t5">&nbsp;重载</li> <li id="rcb_t5">&nbsp;重载</li>
<li id="rcb_t6">🆕&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> </ul>
</body> </body>
</html> </html>
<script src="/lib/js/api.js"></script> <script src="/lib/js/api.js"></script>
<script src="/js/popup.js"></script> <script src="/js/popup.js"></script>
<script src="/js/openLink.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); window.open(url);
} }
break; break;
case "rcb_t7": // case "rcb_t7":
openBtnLink(); // break;
break;
default: default:
console.error(e.target.id); console.error(e.target.id);
break; 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() { function loadingFade() {
var opacity=1; var opacity=1;
const position = document.querySelector('#loading'); const position = document.querySelector('#loading');
//var loadingPage=document.getElementById('loading'); // var loadingPage=document.getElementById('loading');
var loadingBackground=document.getElementById('loading_bg'); var loadingBackground=document.getElementById('loading_bg');
var time=setInterval(function () { var time=setInterval(function () {
if (opacity<=0){ if (opacity<=0){
clearInterval(time); clearInterval(time);
//loadingPage.remove(); // loadingPage.remove();
// $('#loading').remove(); // $('#loading').remove();
position.style.display = 'none'; position.style.display = 'none';
} }

@ -1,17 +1,8 @@
function openLink () { function openLink () {
var iframe = document.getElementById("myFrame"); var iframe = document.getElementById("myIframe");
var iframeSrc = iframe.getAttribute("src"); var iframeSrc = iframe.getAttribute("src");
encode_and_open (iframeSrc) 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) { function encode_and_open (event) {
var encodedSrc = encodeURIComponent (event); var encodedSrc = encodeURIComponent (event);
var link = "/incert/?link=" + encodedSrc; 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>` 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; nav.innerHTML=nav_html;
list.innerHTML=list_html; list.innerHTML=list_html;

@ -4,7 +4,7 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js/loading.js"></script> <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="icon" type="image/svg+xml" href="/img/icon.svg">
<link rel="stylesheet" href="/css/tool_type.css"> <link rel="stylesheet" href="/css/tool_type.css">
<script src="/js/include.js"></script> <script src="/js/include.js"></script>

Loading…
Cancel
Save