Skip to content

Commit b09ce20

Browse files
MuGuiLinMuGuiLin
committed
update
1 parent a03e40b commit b09ce20

2 files changed

Lines changed: 106 additions & 0 deletions

File tree

‎Web-API/iframe父子跨域通信/child.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>子页面</title>
9+
<style>
10+
main {
11+
display: flex;
12+
width: 100%;
13+
border: 1px solid gray;
14+
}
15+
16+
aside {
17+
flex: 1;
18+
padding: 10px;
19+
}
20+
21+
.tree {
22+
border-right: 1px solid gray;
23+
}
24+
25+
.tree>input {
26+
width: 100%;
27+
}
28+
29+
.selected {}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<h1>子页面</h1>
35+
<hr>
36+
<h3 id="urlpar"></h3>
37+
<main>
38+
<aside class="tree">
39+
<input type="search" id="search" placeholder="搜索部门、成员"></input>
40+
</aside>
41+
<aside class="selected">
42+
<p>已选择的部门、成员</p>
43+
</aside>
44+
</main>
45+
46+
<script>
47+
const urlpar = document.querySelector('#urlpar')
48+
const params = new URLSearchParams(window.location.search);
49+
let pars = {}
50+
params.forEach((value, key) => {
51+
console.log(`${key}: ${value}`);
52+
pars[key] = value
53+
});
54+
urlpar.innerText = JSON.stringify(pars);
55+
56+
57+
const textarea = document.querySelector('#textarea')
58+
window.getTextareaValue = function () {
59+
return textarea.value;
60+
}
61+
62+
textarea.oninput = function (e) {
63+
console.log(e.target.value)
64+
localStorage.setItem('textarea', e.target.value)
65+
}
66+
</script>
67+
</body>
68+
69+
</html>

‎Web-API/iframe父子跨域通信/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>父页面</title>
9+
</head>
10+
11+
<body>
12+
<h1>父页面</h1>
13+
<hr />
14+
<div>
15+
<iframe id="child" src="./child.html?app=abc123&uid=user666" width="800" height="300"></iframe>
16+
<button id="btn">获取子页面的数据</button>
17+
<h3 id="message"></h3>
18+
</div>
19+
20+
21+
<script>
22+
const child = document.querySelector('#child');
23+
console.log(child.contentWindow)
24+
25+
const btn = document.querySelector('#btn');
26+
btn.onclick = function () {
27+
try {
28+
console.log(localStorage.getItem('textarea'))
29+
console.log(child.contentWindow.getTextareaValue())
30+
} catch (error) {
31+
console.log(error)
32+
}
33+
}
34+
</script>
35+
</body>
36+
37+
</html>

0 commit comments

Comments
 (0)