Electron - Including HTML files in other HTML files - javascript

Hi I am new to electron so i don't know how to do this simple thing... also tried searching before asking but was not able to find proper solution.
// HEADER
<!DOCTYPE html>
<html>
<head>
// some css files
</head>
<body>
// END HEADER
// INDEX.HTML
<div class="wrapper"></div>
// END INDEX.HTML
// FOOTER
// some scripts using require and script taglike
require('renderer.js');
</body>
</html>
// END FOOTER
These are three parts of my file header, main content, footer ... I want to keep header and footer in different files so that i can include them in other files too so that all the pages can get same header and footer.
In php I used to do include("header.php"); Something Like this I want to do in Electron
I Want to include header.html and footer.html in index.html file
Please try to give the easiest solution

Related

Header and footer file in every HTML page

I'm creating a website using GitHub Pages and I want to put the header and footer into separate documents to then link to them on each page I make. GitHub pages only supports static websites, so I can't use PHP or anything like that.
I'm trying to use the advice I found on:
Make header and footer files to be included in multiple html pages
https://www.youtube.com/watch?v=rDFxEALe0JA&ab_channel=JoseMartinez
https://www.quora.com/How-do-I-include-a-header-and-footer-file-in-every-HTML-page-we-are-designing
which uses jQuery but it's just not working for me. Can someone tell me where I'm going wrong?
My file hierarchy:
- index.html
- html
- header.html
- footer.html
- otherfiles.html
- css
- header.css
- footer.css
- otherfiles.css
this is in the index.html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("html/header.html");
$("#footer").load("html/footer.html");
});
</script>
</head>
<body>
<!-- Header-->
<div id="header"></div>
<!--main section-->
<!-- Footer -->
<div id="footer"></div>
And I put this in footer.html and header.html body:
<body>
click here for google
This is from what I can tell, what I'm meant to do, but it's not working at all. Just no header or footer appears on my website.
possibly look into using an iframe object to reference the page, theres an example on the last link you posted (one of the comments)
OR try removing header/footer files from the html folder and put them in the same directory as index.html, to eliminate the possibility that its the file reference that is the issue.
OR look into using the handlebars.js library. this library can be used to implement an MVC layout (basically files are referenced by a home controller to display content). And it will work with GithubPages, I've done it before.
hopefully this helps a little, at the very least pointing you in the right direction.

All PHP pages include the entire set of CSS and JS, efficient?

I'll summarise. Please correct me wherever I was not able to phrase my question correctly.
I have a few PHP pages, all of them have the following format:
<?php
include "header.php";
?>
INSERT PAGE SPECIFIC MATERIAL HERE
<?php
include "footer.php" ?>
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Main CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<navmenu></navmenu>
footer.php
<footer></footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/main.js"></script>
</body>
</html>
I am new to PHP and not sure if this is the correct way to efficiently structure my PHP files because my concerns are:
Each PHP page now loads the same navigation menu and footer. This is intended and is ok. However, it also loads ALL CSS and JS together, even when there are lots of lines of CSS and JS where it is not actually useful in that specific page BUT used in other pages. Is this a need for concern and if yes what ways should we go about doing this?
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
What is the standard practice when dealing with this case?
Would appreciate it if you can give some advice!
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
You should create ONE css file and ONE js file for your entire web site. don't use php file act as css because:
If you have high visited web site, It's better to have ONE css and js file. Because It's a direct file. but when you are creating css or js by php file, php need to calculate. Maybe you think it's fast calculation, but if you need a good performance on high visited web site, it matters.
If you create css and js file by php, sometimes you need to import multiple js or css file. Who knows? maybe it makes you to use 10 js and 10 css inside your head tag! and It's bad for SEO.
Don't worry about one css or js file size. It's better with lower size but you can still create 100KB css or js file without SEO problem.
You can have one css file for all media. print included. Doesn't matter you are using multiple or single file, always use #media print{} inside the same file if you need it.
ONE css and js file can be globally cached. even if you don't need the css or js file, the global css and js file are already cached.
I'm not saying ONE css and js file is always great idea but it has the most benefit.
If you want to reduce the ammount of css/js on your page, then you can do something like this... Call your CSS with:
<link rel='stylesheet' type='text/css' href='css/style.php' />
Inside style.php it would look like something like this:
<?php
switch(basename($_SERVER['PHP_SELF'])){
case 'index.php':
echo 'CSS code for index.php gos here';
break;
case 'login.php':
echo 'CSS code for login.php gos here';
break;
}
?>
Unless you've got like lots of styling and javascript which is confirmed to be seriously increasing load time, then it's fine and I wouldn't do the above.
<?php
$filename = basename(__FILE__, '.php');
?>
<link rel="stylesheet" href="css/<?= $filename ?>.css" />
...
<script src="js/<?= $filename ?>.js"></script>
Drawbacks:
1. Naming each CSS and JS file as your PHP file.
2. Each PHP file should have its own CSS and JS files
P.S: Minimizing all your styles and scripts to only one file loads your pages faster.
Yes it is good approach to manage code. To include same header and footer you can easily add/update/remove menus and other functionality without edit every page file.

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

add a specific set of javascript code to every single page

I have a fully functioning PHP system with various .php files handling different processes.
i need to add in a specific set of javascript code to every single page that's generated.
can any one tell me How to do this? is its possible thanks
Your "system" should include same header for all of the pages. And put your javascript to that file.
like:
header.php
<html>
<head>
<script>
// some script
</script>
</head>
<body>
index.php (main file)
<?php
include "header.php";
// Content
include "some_content.php";
include "footer.php";
?>
footer.php
<div><p>My footer</p></div>
</body>
</html>
Apart from the above methods, you can do this by another method.
Save the javascript as a separate file(code.js) and then using
<?php include("code.js"); ?>
in each of your files.
create a php footer and include this to every page. Place the markup for the script in the footer. The benefit of placing your javascript in the footer is that the page will render the page before trying to execute the script, making your page seem to load faster.
For each page add include "footer.php"
Create a master page which other pages will be included as child pages. In header of the master page the js files can be included and handled by checking you requested url
Example:
$requested_url = $_GET['requested_page'];
...
<script type="text/javascript" src="js_path/<?php echo "$requested_url.js" ?>" ></script>;
...

Android WebView: Using relative paths when loading javascript from assets

I was able to create an Android hello world app that loads html file from assets folder using WebView.loadDataWithBaseURL method:
webView.loadDataWithBaseURL("file:///android_asset/appcode/", html, "text/html", "UTF-8", null);
My html looks somewhat like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="/js/lib/jquery-1.11.0.js"></script> <!-- This script is not being loaded -->
<script src="helloWorld.js"></script> <!-- This script is being loaded -->
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
The problem is the following: jquery-1.11.0.js is not being loaded while helloWorld.js file loads successfully. I verified that the file exists under relative path.
If I move jquery-1.11.0.js to the html file location (to the same place where helloWorld.js is located), it fixes the problem. But I want to use relative paths for loading scripts. Thanks in advance.
UPDATE:
Moving all js files under /assets/appcode/ is not an option,
because I am planning to reuse html files that are relying on these
relative paths
Using CDN links will not work, because I'm
planning to load my own scripts that are not available on the web
If i use "file:///android_asset/appcode/js/lib/jquery-1.11.0.js" instead of "/js/lib/jquery-1.11.0.js" it also works. But this is absolute path, when I want to use relative.
I'd suggest you to use CDN instead:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="helloWorld.js"></script>
Absolute paths sometimes don't work in the WebView such as JavaScript file.
I suggest use relative path with dot(.) followed with path
<script src="./js/lib/jquery-1.11.0.js"></script>
^

Categories