I need to create a new HTML page using javascript.
To do that I tried using the window object
let myDocument = window;
myDocument.document.write(`
<html>
<head>
<title>${title}</title>
</head>
<body><section id="print"></section></body>
</html>
`)
My problem is that I would like to generate that on the background and save the result somewhere in my project.
The user cannot see a new page open or a new window
The new HTML has to be saved
These are the two problems I have at the moment.
I can generate the page, but I could not find out how to do that on the background.
My limitation is that the project uses pure javascript so Node.js packages might not work.
Instead of document.write you can save it in a variable & use it when you want or save it through service or localStorage.
You code must be like:
const title = "Hello World!";
let myDocument =
`<html>
<head>
<title>${title}</title>
</head>
<body><section id="print"></section></body>
</html>`;
console.log(myDocument);
Related
I'm creating a function that opens an existing html template page of which I want to update the data "passed as argument" from the function itself.
(I'm doing this to avoid hardcoding multiple pages, so to dynamically create a page for the client based upon what he clicks from a menu, not sure is this is the right way to go about it, but this is what I come up with).
Is it possible with Vanilla JavaScript , if so and how?
Here is my code example:
<!DOCTYPE html>
<html>
<head>
<script src="js/tester.js"></script>
<title>Document</title>
</head>
<body>
<button onclick="load('dpdate one', 'update two', 'update three')"> Update </button>
</body>
</html>
This is the template page:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="js/tester.js"></script>
</head>
<body>
<p class="one">Not updated</p>
<p class="two">Not updated</p>
<p class="three">Not updated</p>
</body>
</html>
This is my JavaScript function:
function load(one, two, three) {
console.log('Loadin new page with data!');
window.location.href = 'http://127.0.0.1:5500/newPageTemplate.html';
// window.location.assign('http://127.0.0.1:5500/newPageTemplate.html');
// window.location.replace('http://127.0.0.1:5500/newPageTemplate.html');
const dataOne = document.getElementsByClassName('one')[0];
const dataTwo = document.getElementsByClassName('two')[0];
const dataThree = document.getElementsByClassName('three')[0];
dataOne.innerText = one;
dataTwo.innerText = two;
dataThree.innerText = three;
}
When clicking the button it does redirect but it does not update the data.
How to do that?
FYI: If this is achieved what will happen if multiple user click the same at the same time?
I found an hacky solution that works however.
I save the data I need into local storage like so:
localStorage.one = 'Anything you want to save';
localStorage.two = 'Anything you want to save';
localStorage.three = 'Anything you want to save';
This data will persist even after page redirect and can be utilized in a window.onload function like so:
window.onload = (event) => {
console.log(localStorage.one);
console.log(localStorage.two);
console.log(localStorage.three);
}
This solution works, however before using check as not really sure about security issues or other. Use at your own risk.
In my project i have a javascript file that contain a variable like this one:
var htmlcode = "<html><body><h1>My First Web Page</h1><p>My first paragraph.</p></body></html>"
i would to know if in javascript exist a command for render my htmlcode variable ina real html page, i think to use a button for open that page.
So many thanks in advance
Using jQuery, you can use $('html') to select the HTML tag, and change its content using $('html').html("some new content"):
$("#changeHTML").click(function() {
$('html').html("<body><div style='color:red;'>New sample text</div></body>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
Sample text
<button id="changeHTML">Click me</button>
</body>
</html>
Using plain Javascript, you can use document.documentElement to select the document's HTML tag (source), and changing this variable's innerHTML should do the trick.
Well I was working with javascript for my project and found out something interesting. In my javascript code when I do something like
<!DOCTYPE html>
<html>
<head>
<title>Array</title>
</head>
<body>
<script>
var location = ["Kathmandu","Bhaktapur","Lalitpur"];
console.log(location);
</script>
</body>
</html>
save the file as array.html and when I try to run the webpage the URL changes indicating filename as 'Kathmandu,Bhaktapur,Lalitpur'. I am surprised myself with this behaviour and wanted to know why it happen. Btw I am using safari as my web-browser and haven`t tried this on any other browser.
location is an object that holds the location/url of the page, so you should avoid using it as a variable.
Location Object
The location object contains information about the current URL.
The location object is part of the window object and is accessed
through the window.location property.
http://www.w3schools.com/jsref/obj_location.asp
I'm trying to write a web application using the new offline capabilities of HTML5. In this application, I'd like to be able to edit some HTML—a full document, not a fragment—in a <textarea>, press a button and then populate a new browser window (or <iframe>, haven't decided yet) with the HTML found in the <textarea>. The new content is not persisted anywhere except the local client, so setting the source on the window.open call or the src attribute on an <iframe> is not going to work.
I found the following question on StackOverflow: "Putting HTML from the current page into a new window", which got me part of the way there. It seems this technique works well with fragments, but I was unsuccessful in getting an entirely new HTML document loaded. The strange thing is when I view the DOM in Firebug, I see the new HTML—it just doesn't render.
Is it possible to render a generated HTML document in a new window or <iframe>?
EDIT: Here's a "working" example of how I'm attempting to accomplish this:
<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function runonload() {
return $("#newcode")[0].value;
}
$(function() {
$("#runit").click(function() {
w=window.open("");
$(w.document).ready(function() {
$(w.document).html(w.opener.runonload());
});
});
});
</script>
</head>
<body>
<textarea id="newcode">
<!doctype html>
<html>
<head>
<title>New Page Test</title>
</head>
<body>
<h1>Testing 1 2 3</h1>
</body>
</html>
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
I think you are overcomplicating this...
try this:
<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>
$(w.document).html(w.opener.runonload());
You can't set innerHTML—or, consequently, jQuery's html()—on a Document object itself.
Even if you could, you wouldn't be able to do it using html(), because that parses the given markup in the context of an element (usually <div>) from the current document. The doctype declaration won't fit/work, putting <html>/<body>/etc inside a <div> is invalid, and trying to insert the elements it creates from the current ownerDocument into a different document should give a WRONG_DOCUMENT_ERR DOMException. (Some browsers let you get away with that bit though.)
This is a case where the old-school way is still the best:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
Whilst you can inject innerHTML into a pop-up's document.documentElement, if you do it that way you don't get the chance to set a <!DOCTYPE>, which means the page is stuck in nasty old Quirks Mode.
How can I get the title of an HTML page with JavaScript?
Use document.title:
console.log(document.title)
<title>Title test</title>
MDN Web Docs
Put in the URL bar and then click enter:
javascript:alert(document.title);
You can select and copy the text from the alert depending on the website and the web browser you are using.
Can use getElementsByTagName
var x = document.getElementsByTagName("title")[0];
alert(x.innerHTML)
// or
alert(x.textContent)
// or
document.querySelector('title')
Edits as suggested by Paul
this makes the h1 element the page title. this shows how capable can be javascript for small and big projects.
document.getElementById("text").innerText = document.title;
<title>hello world</title>
<h1 id="text"></h1>