EdwinE Posted September 5, 2019 Share Posted September 5, 2019 Hi, I'm an absolute beginner 🙂 I have this header that I would like to have on all my pages, iframe not, the link starts in a new iframe. Include I can't make it work, I've tried this,https://www.w3schools.com/howto/howto_html_include.asp but can't make it work. Header: <!DOCTYPE html> <html lang="dk"> <head> <title>Header</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta charset="utf-8"> <style> </style> </head> <body> <!-- Top menu --> <header class="w3-top"> <div class="w3-white w3-xlarge" style="margin:auto"> <div class="w3-padding-16 w3-left" style="margin-left: 10px;"> <a href="index.html" class="logo"> <img src="Billeder/Logo/logo_ny.png" alt="logo" height="80" width="220" > </a> </div> <div class="w3-right w3-padding-16"> <a href="index.html"> <ul class="w3-ul"> <li class="w3-xxlarge"><i class="fa fa-home"></i></li> </ul> </a> </div> <div class="w3-center w3-padding-16"> <h2 style="font-size: 25px; font-weight: bold;">Hvad vi kan bidrage med.</h2> <p style="font-size: 10px;">Siden er under opbygning, vi koder alt selv i "rå" Html,css. <br /> Ikke optimeret for Mobil og tablet endnu. </p> </div> </div> </header> </body> </html> Page: <!DOCTYPE html> <html lang="dk"> <head> <title>Elowsson</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="w3.css"> <meta charset="utf-8"> <style> </style> </head> <body> <!-- Top menu --> <!-- <header class="w3-top"> --> <!-- <iframe src="Header.html" style= "border:none;" width="100%"> <p>Your browser does not support iframes.</p> </iframe> --> <!-- </header> --> <div class="w3-main w3-container"> <div class="w3-bar w3-black"> <a href="lasersk.html" target="_parent" class="w3-bar-item w3-hover-green">Laserskære</a> <a href="3DPrinter.html" target="_parent" class="w3-bar-item w3-hover-green">3D Printer</a> <a href="LeicaBLK360.html" target="_parent" class="w3-bar-item w3-hover-green">Leica BLK360</a> <a href="Drone.html" target="_parent" class="w3-bar-item w3-hover-green">Drone</a> <a href="Fusion360.html" target="_parent" class="w3-bar-item w3-hover-green">Fusion 360</a> <a href="Autocad.html" target="_parent" class="w3-bar-item w3-hover-green">Autocad</a> <a href="SolidW.html" target="_parent" class="w3-bar-item w3-hover-green">Solid Work</a> <a href="Marstercam.html" target="_parent" class="w3-bar-item w3-hover-green">MasterCam</a> <a href="VRBriller.html" target="_parent" class="w3-bar-item w3-hover-green">VR Briller</a> <a href="TDyr.html" target="_parent" class="w3-bar-item w3-hover-green">Trædyr/Træting</a> </div> </div> <br> <footer class="w3-container w3-teal"> <h5>Footer</h5> <p>Footer information goes here</p> </footer> </body> </html> Edwin Link to comment Share on other sites More sharing options...
Funce Posted September 5, 2019 Share Posted September 5, 2019 I'd be more interested in throwing away the iframe idea (I'm quite biased against iframes) and going back to the include and finding out what was wrong with that. What happened with the w3 include, it obviously works in the example. 1 Link to comment Share on other sites More sharing options...
EdwinE Posted September 6, 2019 Author Share Posted September 6, 2019 9 hours ago, Funce said: I'd be more interested in throwing away the iframe idea (I'm quite biased against iframes) and going back to the include and finding out what was wrong with that. What happened with the w3 include, it obviously works in the example. I can't make it work 🙂 <!DOCTYPE html> <html lang="dk"> <head> <title>Test Elowsson</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="w3.css"> <meta charset="utf-8"> <style> </style> <script> function includeHTML() { var z, i, elmnt, file, xhttp; /* Loop through a collection of all HTML elements: */ z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("w3-include-html"); if (file) { /* Make an HTTP request using the attribute value as the file name: */ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /* Remove the attribute, and call this function once more: */ elmnt.removeAttribute("w3-include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /* Exit the function: */ return; } } } </script> </head> <body> <div w3-include-html="header.html"></div> <script> includeHTML(); </script> <div class="w3-main w3-container"> <div class="w3-bar w3-black"> <a href="lasersk.html" target="_parent" class="w3-bar-item w3-hover-green">Laserskære</a> <a href="#" class="w3-bar-item w3-hover-green">Paris</a> <a href="#" class="w3-bar-item w3-hover-green">Tokyo</a> </div> </div> <br> <footer class="w3-container w3-teal"> <h5>Footer</h5> <p>Footer information goes here</p> </footer> </body> </html> <!DOCTYPE html> <html lang="dk"> <head> <title>Header</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta charset="utf-8"> <style> </style> </head> <body> <!-- Top menu --> <header class="w3-top"> <div class="w3-white w3-xlarge" style="margin:auto"> <div class="w3-padding-16 w3-left" style="margin-left: 10px;"> <a href="index.html" class="logo"> <img src="Billeder/Logo/logo_ny.png" alt="logo" height="80" width="220" > </a> </div> <div class="w3-right w3-padding-16"> <a href="index.html"> <ul class="w3-ul"> <li class="w3-xxlarge"><i class="fa fa-home"></i></li> </ul> </a> </div> <div class="w3-center w3-padding-16"> <h2 style="font-size: 25px; font-weight: bold;">Hvad vi kan bidrage med.</h2> <p style="font-size: 10px;">Siden er under opbygning, vi koder alt selv i "rå" Html,css. <br /> Ikke optimeret for Mobil og tablet endnu. </p> </div> </div> </header> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 6, 2019 Share Posted September 6, 2019 (edited) The page is read from top to bottom, if you cal a function that references a specific element in JavaScript before the reading of page reaches it, too JavaScript it does not exist! that is why in the tutorial it says Quote Call includeHTML() at the bottom of the page: Also you just require html content that you want to include, NOT doctype, head, html or body tags. Edited September 6, 2019 by dsonesuk 1 Link to comment Share on other sites More sharing options...
EdwinE Posted September 8, 2019 Author Share Posted September 8, 2019 Thank you. Now it works in Edge, but not in Chrome 😞 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2019 Share Posted September 8, 2019 Does the same happen in tutorial example in chrome? Link to comment Share on other sites More sharing options...
EdwinE Posted September 8, 2019 Author Share Posted September 8, 2019 The examplehttps://www.w3schools.com/w3js/tryit.asp?filename=tryw3js_html_include_1 works, but if i copy it into local files it does not work in chrome but in edge and my own now works in edge but not chrome. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2019 Share Posted September 8, 2019 (edited) You did copy all links to fonts, css, javascript in the main page from header content? Also make the links to 'https://' links start with '//' instead, it may problem with non secure http working with https secure pages. Edited September 8, 2019 by dsonesuk Link to comment Share on other sites More sharing options...
Ingolme Posted September 8, 2019 Share Posted September 8, 2019 It won't work if you run the HTML file from your desktop because browser security settings prevent AJAX requests from local files. You have to test this in a server environment. Link to comment Share on other sites More sharing options...
EdwinE Posted September 9, 2019 Author Share Posted September 9, 2019 16 hours ago, dsonesuk said: You did copy all links to fonts, css, javascript in the main page from header content? Also make the links to 'https://' links start with '//' instead, it may problem with non secure http working with https secure pages. Thanks for the suggestion, tried it, but then the page would not appear at all, nothing came up. Link to comment Share on other sites More sharing options...
EdwinE Posted September 9, 2019 Author Share Posted September 9, 2019 13 hours ago, Ingolme said: It won't work if you run the HTML file from your desktop because browser security settings prevent AJAX requests from local files. You have to test this in a server environment. I'll try that Link to comment Share on other sites More sharing options...
EdwinE Posted February 13, 2020 Author Share Posted February 13, 2020 Solved the problem in a simple way, installed Web Server for Chrome, and now everything works :-) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now