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

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?

Related

Load HTML file into a webpage's HTML

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

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

open link from one page into iframe on toher page

I want to do something where i have a link on a page called home.php that links to facebook , when you click on this link i want it to take you to a page called frame.php with a header at the top and the facebook link in an iframe. like this: http://themeforest.net/item/ime-portfolio-web-app/full_screen_preview/2918523 can anyone advise what the best way to do this is. If you look in the source of that link you'll see they have a header followed by an iframe with the previous link propagated into it.
Hope this all makes sense, if not heres some basic coding of what I'm trying to acheive:
link
---Next Page
<header>My website name/logo</header>
<iframe src="propagated iframe link from previous page">
You need to create a new page which contains the header and an iframe below. This page needs to take a URL in via the query-string and then output the url as the src of the iframe.
An example PHP page (iframe.php) (Just the bare minimum stuff):
<html>
<head>
</head>
<body>
<div id="header">Your header</div>
<iframe src="<?$_GET['url']?>"></iframe>
</body>
</html>
Then you call this page like so:
Open page
This should give you an idea how it's done, but note that you might need to check the incoming URL and only allow certain domains etc. in case you do not want users to be able to open what ever URL they want through your iframe.php page.
That is not possible since your cannot load Facebook in an iframe, it's forbidden.
Otherwise, your frame.php page could have simply contained a <header> and the <iframe> below.

JavaScript: How to "cache" a file to download, then trigger download upon request?

I have a web app that allows a user to "generate" an HTML email that they can download. When the user clicks the "preview" button, the form is submitted to a new window, which actually generates the html.
<form action="/preview" method="post" target="previewWindow" onsubmit="window.open('', 'previewWindow', 'width=660,height=800,status=yes,resizable=yes,scrollbars=yes')">
<!-- form elements go here -->
</form>
Then I display the HTML on the page in order to "preview" the html before actually downloading the file.
<!-- this is the html used in the popup window -->
<html>
<head>
<title>Email Preview</title>
</head>
<body>
<div id="header">
Download
</div>
<div id="emailHtml">
<?php echo $this->emailHtml; // the HTML that I will want to download soon ?>
</div>
</body>
</html>
My script has already done the work of generating the HTML since I am already displaying it on the page. Is there a way to generate an HTML file from this HTML and "cache" it so that when the user clicks the download link, it simply triggers the browser to download this content as a file without having to re-generate the html again? I'm trying not to save any files on the server if I don't need to.
Based on Mikko Ohtamaa's comment above, it seems that there is no way to achieve this with JavaScript. I have decided to save the file to a temp directory as a workaround. I'm still interested to hear if there is a way to do something like this without saving the file to the server.

Categories