Load HTML file into a webpage's HTML - javascript

I am building a webpage that loads the functional scripts ( e.g. script.js ) during onload. This script have functionalities such as timer, and user activity tracking ( Tracking whether user is on Page, Inactive on the page). If the user is actively on the page for 10 seconds, It will show a pop out survey window and allow users to fill in similar like this
How could I finish this by just using JavaScript to load the HTML and CSS of this pop out window from a source?
For example:
popUpWindow.html
<div>
<form> ... </form>
</div>
I imagine that these codes can be inserted into the webpage's DOM and shows up when necessary like this:
webpageScript.js
// functionalities for user and timer tracking here
function loadPopOutWindow() {
// download the html and css source files of the window
// include the tags of html file into webpage's html
document.getElementById("body").innerHTML = ...;
}
webpage.html
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
// Webpage's contents
// pop out window
<div>
<form> ... </form>
</div>
// apply the style of the pop out window
<style .. ></style>
</body>
</html>
I tried to google search around to figure out other ways to implement this. I am not suggesting to use ways like load it using other language like PHP. If my idea is impossible, I also seen there are ways to do this using jQuery but is it possible to include jQuery codes using vanilla javascript?
Note: My webpage is built with HTML, CSS and vanilla javascript

Related

Is it possible to display an external website using <link> tag?

If I import a website using the < link > tag, will I be able to display it's contents into some element of my HTML page? The website I am trying to access has it's X-Frame-Options set to 'DENY'.
As per my understanding, such websites cannot be framed to prevent clickjacking. At I higher level, I believe this is a security restriction set to the website which I cannot modify at my end.
What I am currently trying is this:
<!DOCTYPE html>
<html>
<body>
<div id="thisdiv">Hi</div>
<script>
// Handle Loaded Templates.
function templatesLoaded(event) {
console.log('Templates loaded.');
}
// Handle Errors.
function templatesFailed(event) {
console.log('Templates could not be loaded.');
}
</script>
<link rel="import" href="https://someurl" onload="templatesLoaded(event)" onerror="templatesFailed(event)">
</body>
</html>
I wish to know whether there is any way I can display the contents of the website into some element on my page in the templatesLoaded method.
Open for any suggestions. Thank you :)
You can use iframe tag to display another webpages to your webpage.
See this link... http://www.w3schools.com/tags/tag_iframe.asp

website blinks since header code is loaded from a different file

I am developing a website from scratch and I realized that instead of having the header (banner+horizontal navigation menu) code in each html page, it would be more efficient to have it in a separate HTML file and use the JS load function in every page's body, so I can modify the header in only one file to apply changes to the whole website instead of wasting time modifying it on every page.
problem is since I made that change using :
<script>
$("#header").load("header_eng.html");
</script>
in every page's body (where header_eng is an html file containing my header code), my website started to "blink" between each page. Now when I navigate the website, the banner image, for example, blinks/flickers between pages instead of just staying there.
I did not have this problem when my header code was in every page's code.
here is the example of the website with the header code in every page file :
https://cbrieuc.github.io/index.html
(only the two first pages are up for the first example so just spam the link "About Me" or "News" to check for blinking)
and here with the "load" function instead :
https://cbrieuc.github.io/index_eng.html
here is what the code looks like for a page using the "load function"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>BRIEUC COUILLEROT</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div></br>
<div id=corps>
<pre>
test
</pre>
</div>
<!--loading header from header.html-->
<script>
$("#header").load("header_eng.html");
</script>
</body>
</html>
Any idea what occured?
by the way i'm quite new to web development!
It is because the javascript is being executed after page load. You need to include your header file using a server side language like php

How to save locally my current HTML / Javascript page (using Javascript / PHP)?

I've a simple HTML / Javascript page and I'd like to give to my user the ability to save the code of my current page that is a simple HTML / Javascript page.
I'm thinking something like right-click + "Save as"(Ctrl+S) + "Select All" (Ctrl+A) + Copy (Ctrl+C) + Paste (Ctrl-V) in some file locally
I'm using PHP ....
Any suggestion (or, better, example ..), will be appreciated ...
Cesaee
If it's static page which doesn't need user input or data, the easiest thing that comes to mind is linking to a ZIP file. You could link to a text file too so that it's easier for the user to copy and paste. But generally speaking, if you link to a resource the user's browser understands, the browser will try to render the content and make it a little trickier for the user to save.
Alternatively, as Al.G. pointed out below, you can set a header in PHP to download the webpage rather than render it. You can do this as follows:
<?php
header('Content-Disposition: attachment; filename="example.html"');
?>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
...
</style>
<script type="text/javascript">
...
</script>
</head>
<body>
<div id="body-wrap">
....
</div>
</body>
</html>
Whenever the user visits the PHP page, it will download all of the HTML, CSS, and JavaScript after the initial closing PHP tag. Perhaps you could link to the page they're viewing and say "download this page", which links to a copy with that PHP bit at the top?

Header that stays fixed in place as navigating through pages (it is never reloaded)

I found a website that has the same header for all the pages which never reloads when navigating through pages. After header loads once, it stays in place and the rest of the layout (content and footer) loads from page to page. Its pretty much like when you have a frameset but its not.
Mouse hover the upper menu and click on any item and you will see what I mean.
What is this technique called? I would like to know the name so I can research about it and learn it.
Thank you.
After reviewing the website you submitted I was able to find a javascript file, which as many people suggested uses ajax to load the contents into the page without reloading it, after the webpage is loaded the script triggers a hashchange which changes the url to match the one you clicked on using window.history.pushState as suggested by #escapedcat , the javascript also handles the animation and changes the classes of certain elements in the webpage to reflect it's state (updating, etc..)
The code is uglified but you can still see how this is done
link
edit
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<header>
<nav>Link</nav>
</header>
<div id="content">
this is the default content
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('nav a').on('click', function(e){
e.preventDefault();
console.log('test');
$.get(this.href, function(data){
$('#content').html(data);
console.log(this);
history.pushState({foo:'bar'}, 'second page', 'page.html');
});
});
</script>
</body>
</html>
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
This is page 2
</body>
</html>
The above changes the url, you still have to do further development of the code to get full functionality i.e.(back button)
you can refer to Page not reloading via 'back' when using pushState() / onpopstate to add this kind of functionality
edit:
The pushState() method
as the documentation states the pushState method recieves 3 arguments, a state object containing serialized information associated with the new history entry, the page title, and the page url, each time a user navigates to a new history entry the popstate method is fired and the state changes to represent the current state
The technique is called a "Single page application" (a.k.a. SPA).
You can create a SPA using any framework or library you wish (e.g. AngularJS, ReactJS, jQuery, etc) as long as you follow some guidelines.
A single-page application (SPA) is a web application or web site that
fits on a single web page with the goal of providing a more fluent
user experience similar to a desktop application. In a SPA, either all
necessary code – HTML, JavaScript, and CSS – is retrieved with a
single page load, or the appropriate resources are dynamically
loaded and added to the page as necessary, usually in response to user
actions.
Assuming that we're not loading all of the content in advance, the basic guidelines are:
When the server loads the page for the first time, you decipher the URL and return the appropriate page. The page should contain an identical template for all pages, while only a dedicated part of the html file is reserved for the dynamic content.
For example, all pages in my website should return the same header and load the same javascript files, the part that changes is only my #content element which contains the html of that specific page, according to the URL.
When the user clicks an internal link you perform the following operations:
Prevent the link from navigating, using event.preventDefault()
Change the URL yourself, using the history API (history.pushState(stateObj, title, path))
Load the content using Ajax and replace the the existing content with the new one.
Listen to popState events to detect change in the URL due to the use of the back and forward buttons. (window.addEventListener('popstate', handler))
Load content according to the new URL.
Note: The server needs to provide the content (without the rest of the template) using Ajax.
Concerning the "How", that is completely up to you as long as you understand the workflow of a SPA.
The technology used is Angular JS. If you want to learn this technology you can
use http://www.w3schools.com/angular/ or http://www.tutorialspoint.com/angularjs/
.If you want to see the page souce code you can right click and then go to inspect and right click and then go to inspect view page source. By Inspecting you will see the real time changes that are happening in the backend.
Im not sure how this person does it but how you could make this is:
When an user clicks on a menu item load the content with ajax (no refresh)
$(document).ready(function(){
$("menu-item").click(function(){
$("#content").load("something");
});
});
You can update the url with :
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
this updates the url without a refresh
If a user lands on a specific url you can pass the required data based on the url to load the right content.
You can use Meteor.js too.
Their own website is built using meteor.js and you can clearly see the functionality you want on that website.
You can achieve same by the a layers in css (click here to know more)
For the site you suggested there will be three layers
Image
Header(which will scroll down on mouse hover)
The Background image (That is Hidden by the Header)

ASP.NET auto reload div without using javascript or jquery?

So I have a winforms(windows) application and it has a form that reloads a datagrid every 30secs, this form has a few other controls in it as well.
I am trying to convert this application to the web(ASP.NET MVC5) and I trying to figure out a way to do the reload portion of my application.
I have the page created and I have a button on the page that reloads the data on the table(partialview is returned). How can I make that partial view auto reload itself? Without using javascript or jquery?
You mentioned a div specifically, but I don't think that's possible. You could however use an iframe, maybe.
You could use a refresh header on a page embedded in an iframe.
So, we'll call the file that goes in the iframe refreshing_form.html and here's its structure:
<html>
<head>
<META http-equiv="refresh" content="5;URL=refreshing_form.html">
</head>
<body>
<!-- Your content here -->
</body>
</html>
And then in the main page, we have the iframe...
<iframe src="refreshing_form.html"></iframe>
The refreshing_form.html will reload itself in a loop forever. The containing page with the iframe will not reload (though the content of the iframe will). Poor man's ajax.
However, this seems like a lot of cludge to do something that javascript is really good at. Are you sure you can't use it?

Categories