It is possible to do. You just need to override the default behavior of the a tag – which will open the link in the current (i.e embedded) document.
Since you want the parent window to be redirected to the selected page, you just need to set the parent window’s location with a bit of JavaScript:
// Add this to header.html
function redirect(page) {
window.parent.location = page;
}
And in header.html, you would need to add an onclick to each of the navigation links like this:
<a href="contact.html" onclick="redirect(this.href)">CONTACT</a>
Since you are just using HTML, this isn’t really possible. This is usually done with Static Site Generators, which can include components when you build the website. These are quite different than plain HTML.
While <iframe> tags could be used, that is definitely a bad solution, and will not be pleasant for the user.
The best solution is to just copy/paste the code, and if you make a website that relies on including components in the future, use a framework like Gatsby
I have a navigation bar in one html file and want to include it into multiple html files. Below is my header.html file.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="w3-top top" id="header">
<div class="w3-bar w3-red " style="padding:20px;">
<img src='Imagesmenubar-logo-white.png' width="150" height="50">
<div class="w3-right topnav" id="myTopnav">
<a href="home.html" class="active">HOME</a>
<a href="about.html">ABOUT</a>
<a href="service.html">SERVICES</a>
<a href="contact.html">CONTACT</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Then I use embed tag and it works. However, the navigation bar does not working and not linked to the particular page if I go to home, about, services, and contact page. The code in home.html is as below:
<div class="w3-top top">
<div class="w3-bar w3-red " style="padding-left:65px;padding-bottom:20px;padding-top:20px; padding-right:80px">
<embed type="text/html" src="header.html">
</div>
</div>
How can I resolve this?
