I am trying to develop the Browser Back Button redirect script.
So basically when the user arrives at index.html for google or any other social media, on clicking the back button the user should go to the specified page.
I tried creating it with javascript, But it's not working. Anybody can help about it?
I created 3 pages
1) Index.html
<!DOCTYPE html>
<html>
<body>
<p>Redirect Page</p>
</body>
</html>
2)redirect.html
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
setTimeout(function(){window.scrollTo(0,1)},0);
}
window.history.pushState(‘back.html’, ‘back’, ‘back.html’);
window.history.pushState(‘index.html’, ‘Index’, ‘index.html’);
window.addEventListener(“popstate”, function(e) {
if(document.URL.indexOf(“back.html”) >= 0){
document.location.href = document.location;
}
});
</script>
</head>
<body>
<p>By pressing the browser back button it should redirect to specified url</p>
</body>
</html>
3) back.html
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script>
document.location.href = “https://www.google.com”;
</script>
</head>
<body>
</body>
</html>
Related
Is it possible to call and run a function in a page, lets say a.html from page b.html
page a.html is like below which has a function to update page background color
<!DOCTYPE html>
<html>
<head>
<title>Page A</title>
</head>
<body>
<h1>This is Page A</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
function UpdatePageA(){
$("body").css("background-color","gold");
}
</script>
</body>
</html>
Page b.html is like
<!DOCTYPE html>
<html>
<head>
<title>Page B</title>
</head>
<body>
<h1>Update Page A from Here</h1>
<button type="button" class="btn update-page-a">Update Page A</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
$(".update-page-a").on("click", function(){
UpdatePageA();
});
</script>
</body>
</html>
Option number 4 here: https://blog.bitsrc.io/4-ways-to-communicate-across-browser-tabs-in-realtime-e4f5f6cbedca
This is assuming that you have both tabs open. If you are talking about sequentially moving from a.html to b.html, then you could use query string parameters or local storage.
I am currently working on the beginning stages of js and trying to create buttons and alerts with it. when i write my code, the alerts work but my buttons are not appearing. when i inspect my webpage, the buttons dont even appear in the code. any suggestions on what i can do to fix this?
alertmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<script type="text/javascript" src="js/code.js">
</script>
</body>
</html>
code.js
window.alert("Welcome to Javascript");
buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button 2">Click me.</button>
<script>
document.getElementbyId("button 2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
well at first try not to use spaces when you create your buttons ids e.g (id="button 2")
instead use id="button2"
I modified your code adding the event listener on document ready find the below code hope that is what you are looking for, it should get your started.
Note: for posting here when you write your message paste your code under your message text and select the code then Press ctrl+K that should identify your code area then post it and all should work fine...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button2">Click me.</button>
<script>
$(document).ready(()=>{
document.getElementById("button2").addEventListener("click", function(){
alert("You have just clicked me!");
});
})
</script>
</body>
</html>
I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)
Is there any reason why the javascript file ( app.js ) which is used inside my iframe do not get executed when my iFrame refreshes?
Basically what's happening now is:
When I first load index.html , the javascript app.js output "hello world" to the console, but then once the iframe gets automatically refreshed ( through reloader.js ) everything refreshes but the javascript, what I mean is, once the iframe is refreshed I don't get a new "hello world".
Does anyone passed through the same issue?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>treedux - Development Server</title>
<script src="reloader.js"></script>
<script>
</script>
</head>
<body>
<div class="topbar">
<div class="icon-menu"></div>
3dux.io Header
</div>
<iframe id="treeduxwrapper" class="iframe" src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>treedux - Development Server</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="topbar">
<div class="icon-menu"></div>
CONTENT
</div>
</body>
</html>
app.js
console.log('hello world')
Thanks in advance,
TF
Try to reload by this,
document.getElementById('treeduxwrapper').contentWindow.location.href = "iframe.html"
I think the issue is you have kept your reloader.js in the index.html which will reload the current page(index.html) only, not the iframe.html. So in short your iframe.html is not getting reload on every reload of index.html.
Here are two sample pages
Page 1:
<html>
<title>Page 1</title>
<body>
This is page 1
Click to go to page 2
</body>
</html>
Page 2:
<html>
<title>Page 2</title>
<script>
function test()
{
alert(document.referrer);
}
</script>
<body onload="javascript:test();">
This is page 2
Click to go to page 1
</body>
</html>
In safari, when link clicked from Page1, document.referrer does not seems to work/hold values.
It works fine in Mozilla.