Create a mini browser on the web using i-frame
Using i-frame to display another webpage in a website.
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Mini Browser</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 .container {
12 width: 100vw;
13 height: 100vh;
14 overflow-y: hidden;
15 }
16 .header {
17 display: flex;
18 width: 100%;
19 height: 8vh;
20 padding: 12px 0px;
21 align-items: center;
22 justify-content: space-evenly;
23 border-bottom: 1px solid grey;
24 }
25 #url {
26 width: 65%;
27 height: 48px;
28 border: 0;
29 background-color: #e0e0ee;
30 border-radius: 16px;
31 padding: 0px 16px;
32 font-size: 18px;
33 }
34 #go {
35 width: 20%;
36 height: 48px;
37 border: none;
38 border-radius: 16px;
39 }
40 #go:hover {
41 cursor: pointer;
42 background-color: #e0e0ee;
43 }
44 #url:focus, #go:focus {
45 outline: none;
46 }
47 iframe {
48 height: 92vh;
49 width: 100%;
50 }
51 </style>
52 </head>
53 <body>
54 <div class="container">
55 <div class="header">
56 <input type="text" id="url" value="https://">
57 <button id="go">GO</button>
58 </div>
59 <iframe src="https://google.com" frameborder="0" id="browser"></iframe>
60 </div>
61 <script>
62 var url = document.getElementById("url")
63 var go = document.getElementById("go")
64 var browser = document.getElementById("browser")
65 go.addEventListener("click", LoadPage )
66
67 function LoadPage()
68 {
69 var newUrl = url.value
70 browser.src = newUrl
71 }
72 </script>
73 </body>
74 </html>
