其他

在某些应用的内置浏览器中浏览任意网页

小永***Lv.5 金牌会员发表于 2024-6-6 · 最后回复 2025-9-24 IP:广西 3,083 3

本帖最后由小永高呐于 2024-6-6 08:49 编辑

在后台创建一个叫index.html的网页，粘贴如下代码入内保存，之后在可以打开网址的应用输入你主机的网址(或者用我这的demo也行)，就可以去浏览任意网页了
蛮早之前码的代码，蛮乱的，不过能用，也没啥依赖项
演示demo：https://pic-tc.pages.dev/xiaoyonggaoya/website

<html>
<head>
<title>网页浏览器</title>
<style>
body{margin:0;padding:0}
#misha {position: fixed;top: 10px;right: 10px;width: 80px;height: 40px;background-color: #88888899;border: none;font-size: 20px;border-radius:8px;} /* 打开菜单按钮 */
#liuying {position: fixed;top: 60px;right: 10px;width: 300px;height: 230px;background-color: #ffffff99;border: 1px solid black;display: none;border-radius:4px;} /* 界面 */
#hanya {margin: 10px;width: 280px;border-radius:3px;} /* 网址栏 */
#tingyun {margin: 10px;width: 80px;height: 40px;background-color: #00FF9999;border: none;border-radius:8px;} /* 访问/刷新按钮 */
#zhigengniao {margin: 10px;width: 80px;height: 40px;background-color: #FF000099;border: none;border-radius:8px;} /* 关闭菜单按钮 */
#iframe {width: 100%;height: 100%;border: none;} /* iframe自适应全屏 */
div {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
button {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
</style>
<base target="_self">
</head>
<body>
<button id="misha" onclick="tuopa()">菜单</button>
<div id="liuying">
<div>请在下面框中输入网址以访问网站</div>
<input id="hanya" type="text" placeholder="输入网址以访问网站" value="https://www.bing.com">
<button id="tingyun" onclick="guinaifen()">访问/刷新</button>
<button id="zhigengniao" onclick="buruoniya()">关闭菜单</button>
</div>
<iframe id="iframe" src="https://www.bing.com" allow="fullscreen" allowfullscreen="true"></iframe>
<script>
function tuopa() {document.getElementById("liuying").style.display = "block";} // 菜单打开
function buruoniya() {document.getElementById("liuying").style.display = "none";} // 菜单关闭
function guinaifen() {var url = document.getElementById("hanya").value;document.getElementById("iframe").src = url;} // 网址访问/刷新
window.onload = function() {tuopa();} // 让页面加载时展开菜单
</script>
</body>
</html>