网页中嵌套网页制作方法

Bertha 。 2024-02-27 05:14 27阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<meta charset="UTF-8">  
<title>网页搜索</title>  
<style>  
body \{  
background-color:\#f8f8f8;  
\}  
.butto \{  
margin: 0 10px;  
padding: 1px 2px;  
background-color:\#333333;  
border: none;  
color: \#fff;  
font-size: 15px;  
cursor: pointer;  
width:15%; /\* 设置按钮的宽度为150像素 \*/  
height: 37px; /\* 设置按钮的高度为50像素 \*/  
border-radius: 100px;  
background-color=\#FFFFFF;  
\}  
.button1\{  
width:15%; /\* 设置按钮的宽度为150像素 \*/  
height: 37px; /\* 设置按钮的高度为50像素 \*/  
border-radius: 100px;  
background-color: \#f8f8f8;  
color: black;  
border-color:\#808080;  
box-shadow: 0 -1px 4px rgba(100, 100, 0.1, 0.2);  
  
\}  
  
\#content-frame \{  
width: 105%;  
height: 90vh; /\* 将88vh修改为更大的值，如90vh或100vh \*/  
margin: 0 auto; /\* Add this line to center align the div horizontally \*/  
overflow-y: scroll;  
background-color: \#f8f8f8;  
color: black;  
padding: 15px;  
box-sizing: border-box;  
margin-left: -10px;  
/\* 添加动画效果 \*/  
animation-name: fadeIn;  
animation-duration: 1s;  
animation-timing-function: ease-in-out;  
  
border-radius: 60px;

\}  
/\* 添加淡入动画的关键帧 \*/  
@keyframes fadeIn \{  
from \{  
opacity: 0;  
\}  
to \{  
opacity: 1;  
\}  
\}  
.container \{  
position: fixed;  
bottom: 0;  
width: 100%;  
height: 50px;  
background-color: \#333333;  
display: flex;  
justify-content:center;  
margin-left: -8px;  
align-items: center;  
\}  
/\* 修改搜索框输入框的宽度 \*/  
\#search-input \{  
width:65%;  
height: 30px;  
border-radius: 100px;  
border-color:\#333;  
  
\}  
</style>  
</head>  
<body>  
  
<p></p>  
<p></p>  
<div id="search-box" class="search-box">  
<form id="search-form" οnsubmit="openSearchResult(event)">  
<input type="text" id="search-input" placeholder="请输入搜索内容或网址">  
<button type="submit" id="searchBtn" class="button1">搜索</button>  
<button type="submit" class="button1"οnclick="window.location.href = 'https://ui.ptlogin2.qq.com/cgi-bin/login?pt\_hide\_ad=1&style=9&appid=549000929&pt\_no\_auth=1&pt\_wxtest=1&daid=5&s\_url=https%3A%2F%2Fh5.qzone.qq.com%2Fmqzone%2Findex'">社交</button>  
</form>  
</div>

<div id="content-frame">  
<iframe src="http://www.xinhuanet.com" style="width: 100%; height: 100%; border: none;"></iframe>  
</div>  
  
<script>  
function openSearchResult(event) \{  
event.preventDefault();  
var searchInput = document.getElementById('search-input').value;  
  
// 判断输入是否为网址  
if (isURL(searchInput)) \{  
if (!/^https?:\\/\\//i.test(searchInput)) \{  
// 添加http://前缀  
searchInput = 'http://' + searchInput;  
\}  
// 在底部方框内打开网页  
var contentFrame = document.getElementById('content-frame');  
contentFrame.innerHTML = '<iframe src="' + searchInput + '" style="width: 100%; height: 100%; border: none;"></iframe>';  
\}  
else \{  
// 在底部方框内打开通过搜狗搜索的结果页面  
var contentFrame = document.getElementById('content-frame');  
var searchUrl = 'https://www.sogou.com/web?query=' + encodeURIComponent(searchInput);  
contentFrame.innerHTML = '<iframe src="' + searchUrl + '" style="width: 100%; height: 100%; border: none;"></iframe>';  
\}  
\}

function isURL(str) \{  
// 判断字符串是否符合URL格式  
var pattern = new RegExp('^((https?:\\\\/\\\\/)?(www\\\\.)?(\[a-zA-Z0-9-\]+\\\\.)+\[a-zA-Z\]\{2,\})(:\\\\d+)?(\\\\/\[^\\\\\\\\\]\*)?(\\\\?.\*?)?(\#.\*)?$');  
return pattern.test(str);  
\}  
  
</script>  
  
<div class="container">  
<button class="butto" οnclick="window.location.href='index.html'">主页</button>  
<button class="butto" οnclick="window.location.href='dspa.html'">短视频</button>  
<button class="butto" οnclick="window.location.href='index123.html'">生活</button>  
<button class="butto" οnclick="window.location.href='gongju.html'">工具</button>  
<button class="butto" οnclick="window.location.href='cai.html'">中心</button>  
</div>  
</body>  
</html>