Redirect routes in HTML using Javascript - javascript

I have 3 html files that I want to link together. The three files are button.html, option1.html, option2.html and all three files are stored in one src folder.
The button.html is a simple webpage that contains two buttons:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
</body>
</html>
and the two other .HTML file are regular pages each w/ different content.
<!DOCTYPE html>
<html>
<head>
<title>Option 1/2</title>
</head>
<body>
// different data contained for option1.html and option2.html
<h1>Heading for Option 1 or 2</h1>
<p>Paragraph for Option 1 or 2</p>
</body>
</html>
I'm not sure what I'm doing wrong but even with the onClick() functions for each buttons, the buttons won't link to the other HTML files.
I'm wondering if I should have some kind of link tag in the header for the two HTML files. Also, I'm not very certain about that location.href line does in the script tag of button.html file. I just found some resources online to try this out.
Also, I need to do this using ONLY Vanila Javascript, HTML and CSS.
Please help me out. Thanks!!

UPDATED : This will work, I believe. See, first of all, always add your script tag just before the closing body tag. The reason is because that, the code will not work in case the DOM elements it looking for would not have been rendered.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function() {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function() {
location.href = "./option2.html";
};
</script>
</body>
</html>

You need add the script tag before closing body tag.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</body>
</html>

There is this thing called a same origin policy https://javascript.info/cross-window-communication#can-t-get-but-can-set which could be affected by location.href, if you are previewing the files in the local storage as opposed to a web server. Try changing it to location="./option.html" etc, removing the hrer
Alternatively you can make an invisible a tag, set the hrer, and click it with JS
var a=document.createElement("a");
a.href="option1.html";
a.click() ;
and put that in your onclick function instead,
EDIT another thing just realized
The script tags are in the head part of the html, but the buttons are in the body, so try copying the script tags to the bottom of the body tag, underneath the buttons, or surround both onclick functions with window.onload=function {/*other code goes here*/}

Related

Calling javascript function when html is executed

I have one task, when I open the html page, that html contains javascript under script tag, and under which I have implemented one function called auther(). How can I call this function while opening the html page, I don't want to implement it by using onClick or onLoad, etc. methods from html/javascript.
Means whenever my html gets executed my javascript function should get called itself. Following is my html:
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="authOps" >
<button onclick="auther();">GET author</button>
//By clicking on this button it is working but I want to execute
//this function when this html get executed
</div>
</body>
<script type="text/javascript">
function auther(){
//some code
}
</script>
</html>
In the above scenario whenever my html page is opened, the javascript function should get executed without any click handling.
Note : I have mentioned html code just for reference purpose, My main purpose just to execute javascript function, how can I achieve this??
There are 2 ways to do this as far as i know,
1:
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="authOps" >
<button onclick="auther();">GET author</button>
//By clicking on this button it is working but I want to execute
//this function when this html get executed
</div>
</body>
<script type="text/javascript">
function auther(){
console.log("Hi");
};
auther();
</script>
</html>
2:
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="authOps" >
<button >GET author</button>
//By clicking on this button it is working but I want to execute
//this function when this html get executed
</div>
</body>
<script type="text/javascript">
var thisIsAFunction = function (){
console.log("Hi");
}();
</script>
</html>
You can give a try with both options.
Just call the method in a script block, instead of from the button click
<script>auther(); </script>

How can we call a function in a .js from a .html file

In my index.html file I have:
<button onclick="myFunction()">Click me</button>
myFunction is located in index.js
how can I call this function when the button is clicked?
You need to add the index.js file at the bottom of your HTML, right before the </body> tag:
<script src="path/to/index.js"></script>
Add to header:
<script type="text/javascript" src="index.js"></script>
Add the js file reference in your html page so its functions can be called from html page.
<script src="yourfile.js"></script>
Also give your button type="button" otherwise this button will submit the page and your function will not be called.
<button type="button" onclick="myFunction()">Click me</button>
I'm guessing you're new to this all, so I'm going to try and explain it a little bit more than the answers above.
When you got your HTML:
<html>
<head>
<title>This is the title of my page</title>
<script src='js/script.js' type='text/javascript'></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
When you see this. The <script> tag says to the browser: "Okay, there is coming up some javascript (or jQuery)" so it will look in the src attribute, to see where the javascript is found that should be loaded. When it finds it, it will load it into the html document and you will have the functions in the file ready to be used in your html document. The type attribute just says: "Okay, this script is filled with javascript". You also have type='text/css' for example when you're including a CSS script to style the HTML elements of the page.
Hope it makes sence, and I wish you luck, learning html/css/javascript. If you have any questions, reply to this answer.

How to access html elements in iframe inside html tag

I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>

Close a (dialog box) iFrame from a button within the iFrame

I have two files, named main_page.html and dialog_box.html (see code below).
I want my handleCloseDialogButton() to "close the dialog box", in other words to reload main_page.html, with theFrame.style.display reset to "none".
How can I do this ? Should I use window.open("main_page.html") or window.location.href="main_page.html" or something else ?
Note: I do not want to use Javascript’s alert() function because its capabilities are not sufficient for what I need.
Contents of main_page.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleDialogButton()
{
var theFrame=document.getElementById("myDialogBox");
theFrame.style.display="block";
theFrame;
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. This is the main page.</h2></div>
<iframe id="myDialogBox" src="./dialog_box.html" style="display:none"> </iframe>
<input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box"
onClick="javascript:handleDialogButton();" />
</body>
</html>
Contents of dialog_box.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleCloseDialogButton()
{
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. I am the dialog box.</h2></div>
<input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box"
onClick="javascript:handleCloseDialogButton();" />
</body>
</html>
You can access parent elements from iframe by using window.parent.
See window.parent for details.
With window.parent you can either call parent js function or you can access parent element. Accessing parent element in your case should look like: window.parent.document.getElementById('myDialogBox');
Use this in your handleCloseDialogButton function and set its display to none:
function handleCloseDialogButton()
{
window.parent.document.getElementById('myDialogBox').style.display="none";
}
NOTE: This will not work in file mode in Chrome. You have to put your pages on web server, and than it will work in Chrome browser too.

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

Categories

Resources