feat: html文档中引用其它html文档
parent
38a394a73b
commit
e17518d0d0
@ -0,0 +1,13 @@
|
||||
<!-- 此示例是html片断 -->
|
||||
<link rel="stylesheet" href="./css/Import.css">
|
||||
<div class="import-box">
|
||||
<h2>引入html文件</h2>
|
||||
<a href="#" onclick="window.top.location='./Index.html';">首页</a>
|
||||
<a href="#" onclick="window.top.location='./UseIframe.html';">使用 iframe</a>
|
||||
<a href="#" onclick="window.top.location='./UseObject.html';">使用 object</a>
|
||||
<a href="#" onclick="window.top.location='./UseLink.html';">使用 link</a>
|
||||
<a href="#">使用 bootstrap 等框架</a>
|
||||
<a href="#" onclick="window.top.location='./UseJs.html';">使用 js</a>
|
||||
<a href="#" onclick="window.top.location='./UseJquery.html';">使用 jquery</a>
|
||||
<a href="#">使用 动态网页技术</a>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>使用 iframe</title>
|
||||
</head>
|
||||
<body class="iframe-body">
|
||||
<link rel="stylesheet" href="css/Import.css">
|
||||
<div class="import-box">
|
||||
<h2>引入html文件</h2>
|
||||
<a href="#" onclick="window.top.location='./Index.html';">首页</a>
|
||||
<a href="#" onclick="window.top.location='./UseIframe.html';">使用 iframe</a>
|
||||
<a href="#" onclick="window.top.location='./UseObject.html';">使用 object</a>
|
||||
<a href="#" onclick="window.top.location='./UseLink.html';">使用 link</a>
|
||||
<a href="#">使用 bootstrap 等框架</a>
|
||||
<a href="#" onclick="window.top.location='./UseJs.html';">使用 js</a>
|
||||
<a href="#" onclick="window.top.location='./UseJquery.html';">使用 jquery</a>
|
||||
<a href="#">使用 动态网页技术</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>使用 iframe</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<iframe
|
||||
name="content_frame"
|
||||
src="ImportIframe.html" >
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>iframe 内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>使用jQuery</title>
|
||||
<link rel="stylesheet" href="./css/app.css">
|
||||
<script src="./jquery/jquery-3.6.4.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".import-box").load("./Import.html");
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<div class="import-box">
|
||||
加载中......
|
||||
</div>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>主页内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>使用js</title>
|
||||
<link rel="stylesheet" href="./css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<div class="import-box">
|
||||
加载中......
|
||||
</div>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>主页内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
fetch("./Import.html")
|
||||
.then(response=> response.text())
|
||||
.then(text=> document.getElementsByClassName("import-box")[0].innerHTML = text);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>使用 import</title>
|
||||
<link rel="stylesheet" href="./css/app.css">
|
||||
<link rel="stylesheet" href="./css/Import.css">
|
||||
<link rel="import" href="./Import.html" id="menu"></head>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<div class="import-box">
|
||||
<h2>加载失败了</h2>
|
||||
<a href="#" onclick="window.top.location='./Index.html';">首页</a>
|
||||
<a href="#" onclick="window.top.location='./UseIframe.html';">使用 iframe</a>
|
||||
<a href="#" onclick="window.top.location='./UseObject.html';">使用 object</a>
|
||||
<a href="#" onclick="window.top.location='./UseLink.html';">使用 link</a>
|
||||
<a href="#">使用 bootstrap 等框架</a>
|
||||
<a href="#" onclick="window.top.location='./UseJs.html';">使用 js</a>
|
||||
<a href="#" onclick="window.top.location='./UseJquery.html';">使用 jquery</a>
|
||||
<a href="#">使用 动态网页技术</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>使用Link.Import 内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>使用 Object</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<object
|
||||
type="text/x-scriptlet"
|
||||
data="./ImportIframe.html" >
|
||||
</object>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>使用 Object 内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
body.iframe-body
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.import-box {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.import-box h2 {
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.import-box a {
|
||||
margin: 0 20px;
|
||||
padding: 5px 5px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
margin: 15px auto;
|
||||
padding: 15px;
|
||||
min-height: 400px;
|
||||
background-color: #aca8a8;
|
||||
border: 1px solid rebeccapurple;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-right: 10px;
|
||||
padding: 11px;
|
||||
width: 250px;
|
||||
background-color: #5ccb8c;
|
||||
border: 2px solid rebeccapurple;
|
||||
border-radius: 15px;
|
||||
|
||||
/*便于计算*/
|
||||
background-origin: border-box;
|
||||
}
|
||||
|
||||
iframe {
|
||||
overflow-clip-margin: content-box !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
object {
|
||||
overflow-clip-margin: content-box !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.context {
|
||||
width: calc(100% - 200px);
|
||||
padding: 10px;
|
||||
background-color: #7b96cf;
|
||||
border: 2px solid rebeccapurple;
|
||||
border-radius: 15px;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
|
||||
/*便于计算*/
|
||||
background-origin: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content:flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
||||
|
||||
body {
|
||||
padding: 0px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
|
||||
//第一个容器末尾添加div元素
|
||||
var box = document.getElementsByClassName("container")[0];
|
||||
var node = document.createElement("div");
|
||||
node.setAttribute("class","item item7");
|
||||
node.innerText = "js";
|
||||
|
||||
box.appendChild(node);
|
||||
Loading…
Reference in New Issue