Is there a way to configure in Chrome (or any browser) that whenever a webpage changes it automatically goes back to the previous page.
E.g. If a user presses a "Submit" button on a survey, they will be shown the "finish" message but then the original webpage with the survey will load again?
To go to previous page use
window.history.go(-1);
Example
<!DOCTYPE html>
<head>
<script>
function initialize(){
var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click",function(){
alert("successfully submited");
setTimeout(goBack,2000)
});
function goBack(){
window.history.go(-1);
}
}
window.addEventListener("load",initialize);
</script>
</head>
<body>
<button id="submitBtn">Submit</button>
</body>
To go to a specific page
window.location = "";
While I'm not convinced it's a great idea, you know your requirements better than I do.
So to go back, you run this javascript.
window.history.back()
When you say immediately go back, I assume you want them to see the finish message first before being sent back after, say, 3 seconds?
<script>
setTimeout(function() {
window.history.back();
}, 3000);
</script>
Edit
If you want to redirect without javascript, you can use a meta tag in the header
<meta http-equiv="refresh" content="3; url=http://www.example.com" />
So if you use server side rendering you could reference the HTTP_REFERER header and inject it into your meta tag.
If you don't use server side rendering (PHP, MVC, React, etc) and you can't use javascript, then no; you're stuffed.
Related
I need one of my website pages to instantly redirect to another upon loading. The refresh HTML command does not work, as it does not check whether or not a certain url is being loaded. Also javascript will work too.
You can wait for a load event with JavaScript and use one of either:
window.onload = function() {
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
}
or
window.onload = function() {
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
}
Source: How to redirect to another webpage?
Just add a meta tag in the head section of your HTML like this:
<html>
<head>
<meta http-equiv="refresh" content="0;url=http://redirect-to-this-page.com" />
<title></title>
</head>
<body></body>
</html>
I need to have the Javascript written by the user on one page to be saved and used for the next page. By this, I mean, I need to grab the contents of a div, and somehow save that into a .JS file, which wil automatically run as the next page loads. Is there a way in which I could do this, Or is there another way in which this could be achieved?
Basically, something along the lines of what Codecademy has done, but not live?
If you are just working on a local project (nothing server side). you could store the value to localStorage.
// page 1
<!DOCTYPE html>
<html>
<body>
<div contentEditable="true" id="i1"></div><button id="b1">open next page</button>
</body>
<script>
var div = document.getElementById('i1'), text = "desired value";
div.innerText = text;
document.getElementById('b1').onclick = function(){
localStorage['div value'] = div.innerText; window.open('page2.html'); window.close('page1.html');
}
</script>
</html>
// page 2
<!DOCTYPE html>
<html>
<body>
<p id="p"></p>
<button id="b2">go back</button>
</body>
<script>
p.innerText = localStorage['div value']? localStorage['div value']: "There is no value in your div";
b2.onclick = function(){ window.open('page1.html'); window.close('page2.html'); }
</script>
</html>
If you are ready to change the architecture, I have a question as your answer. Have you tried single page JS applications through AngularJS, EmberJS, Backbone etc?
you don't need to save into a .JS file
you need to post the JS to the server, then render it to the next page
i'm the next page
<script>
// user's code
</script>
I have a Processing sketch that I want to embed in a landing page inside a that will prompt the user to press a button and enter the site.
The function to receive the mouse click is inside the Processing file but needs to change the displayed html page - how can I do this?
<html><head>
<meta charset="utf-8" />
<title>Landing page before the main site</title>
<script src="processing-1.4.1.min.js"></script>
</head><body>
<canvas id="lander" data-processing-sources="lander/lander.pde"></canvas>
</body></html>
And the Processing sketch has the function:
void mousePressed(){
if(overBox){
// push the displayed page to home.html
}
}
Aside from being a terrible idea because you've now locked away what should be web functionality into a canvas (this is what we hate about Flash, too), you're in JavaScript context, so you can just call window.location = "http://...."; and it'll work.
That said, there is absolutely no reason to do what you're about to do here. An HTML5 button label and CSS to style it to look like your button is all you need, using Processing is plain old "you'r doing it wrong" in this instance.
Is it possible -using only JavaScript and HTML- to have 3 pages with the following?
In Page1 there would be a button that when clicked it would redirect to Page2 for X seconds, and then redirect to Page 3.
I know it is possible using JavaScript in each page and timers, but what I don't know is if it can be done in one single JavaScript code in Page1, something like a timer and then redirect to the third page.
Basically, no. But then immediately contradicting myself: You could do it using frames, but I'm with Ixg when he/she says there's likely to be a better way to achieve your ultimate goal.
Basically, to do it with frames: The click on Page1 doesn't take you off Page1, but instead replaces Page1's content with an iframe that fills the entire page, loading its content from Page2. Then since the JavaScript environment of Page1 still exists, you can use a timer to redirect to Page3 when ready, all without any modifications to Page2 or Page3 (unless of course Page2 has frame-busting built into it).
For the record, this scenario can be implemented in one single page.
Say you have three pages, you want page1.html to redirect on click
<html>
<head>
<title>Page 1</title></head>
<body>This is page 1. <input type="button" onclick="toPage2()" value="Go to page 2." /></body></html>
to page2.html
<html>
<head>
<title>Page 2</title></head>
<body>This is page 2.</body></html>
and then have page2.html redirect to page3.html, after some time
<html>
<head>
<title>Page 3</title></head>
<body>This is page 3.</body></html>
All you need to do is get the source of page 2, inject some javascript into it and then load the source into the browser; this means page 2 does not need to be aware of the redirect behaviour. Thus, page 1 would become something like:
<html>
<head>
<title>Page 1</title>
<script>
// you can get the source of page 2 via ajax -- still meeting the requirement of javascript/html only.
var source2 = '<html><head><title>Page 2</title></head><body>This is page 2.</body></html>';
function toPage2 () {
var page2 = document.open('text/html', 'replace');
var source2injected = inject(source2, 3000, 'page3.html');
window.history.pushState('', '', 'page2.html');
page2.write(source2injected);
page2.close(); }
var left = "<script>setTimeout(function(){window.location='",
middle = "';},",
right = ");</scr" + "ipt>";
function inject (source, time, destination) {
return source.replace('<body>', left + destination + middle + time + right + '<body>'); }
</script></head>
<body>This is page 1. <input type="button" onclick="toPage2()" value="Go to page 2." /></body></html>
I am not saying that this is a good idea or the right solution for the problem you are actually trying to solve, but it does answer your question.
I have an open web page dialog. From there, what I'd like to do is when the user clicks on a link, refresh the contents of the dialog with modified query string parameters. The problem I am running into is that rather than refresh the same web page with new parameters, a new browser window pops up.
Here is the page used to open the dialog:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function ShowPopup() {
var popWinFeatures = "dialogWidth: 800px;dialogHeight:600px;center:yes;status:no;scroll:no;resizable:yes;help:no";
window.showModalDialog("webPageDialog.html","PopUpWin",popWinFeatures);
}
</script>
</head>
<body>
Click For Modal
</body>
</html>
and this is the code within the webpage dialog that attempts to refresh the webpage with changed query string parameters:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var queryString = "?ab=123";
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
$('#testLink').attr('href', newURL+queryString);
});
</script>
</head>
<body>
Please Click Me
</body>
</html>
I've also tried using window.open as well as setting window.location. And I've also tried setting window.location.href but the result was the same.
the new browser window displays exactly what I expect. It's just not in the same window.
Thoughts?
Since posting this question, I came up with two possible solutions. In case anyone comes after me and wants to know what I ended up doing, here you go!
The first was just to make the popup non-modal. Removing the modal piece gave me the behavior exactly like I expected it. This didn't work in my situation however for a different reason... It seems that the session cookie was not carried over which in this web app, would cause the log-in page to be displayed before then displaying the correct page. This struck me as odd, but ran out of time to investigate why that was happening.
Second (and this is the solution i ended up going with) was to use an iframe, and display what i needed within the iframe. Definitely not my favorite, but it works!