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.
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 want to create a web page to display amazon products (kiosk-like display) and the goal is to change to the next product every few seconds. Amazon pages can't load in frames, so using php (or any client side/server side solution) is there a way to set a timer to change to the next product?
Here is the sequence:
Show product 1 -----> show product 2 ----> show product 3 ----> repeat
Here is a simple code that uses frames but it doesn't load amazon in the frame. My next step was to add timer but first I need to figure out how I can show amazon pages in a fashion that I can move to the next one after a few seconds. Basically the issue is that without the frames how can I set a timer (either server side or client side) to redirect the page to the next product?
<!DOCTYPE html>
<html>
<body>
<iframe width="500" height="400" id="myFrame" src="http://www.amazon.com"></iframe>
<p>Click the button to change the value of the src attribute in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myFrame").src = "http://www.amazon.com";
}
</script>
</body>
</html>
Coding method (javascript and popup window):
I was able to do this with a pop up window instead of frames. Basically what you need to do is to open a pop up and control the url of that pop up through the parent page. Here is a sample code of the solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type='text/javascript'>
window.setInterval(function(){
process();
}, 15000);
arr = ['http://www.amazon.com/Apple-AirPort-Express-Station-MC414LL/dp/B008ALA2RC',
'http://www.amazon.com/dp/B0087NZ31S'
];
var popup = window.open('http://www.amazon.com','rotator');
i = 0;
function process(){
i++;
index =i%arr.length;
popup.location.href=arr[index];
}
</script>
</body>
</html>
Browser extension method:
I found a chrome extension named Rotisserie URL Rotator that does the rotation, can set a time for each page in seconds. Basically you will specify a set of (url, time) tuples and it will rotate on those urls for the specified times. I also found a few more but for now this does job for the display purpose well. I also found one that will rotate between tabs and had a lot more features like specifying random times, etc. But my main purpose was to show the page in only one tab.
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.
I have the following code:
<html>
<head>
<title>title of this stuff</title>
<script language="JavaScript">
if (top != self) top.document.title = document.title;
</script>
<meta http-equiv="refresh" content="2; URL=javascript:window.open('certainpage.html','_top');">
</head>
<body>
Body of this page
</body>
</html>
and this doesn't work.
I've googled for this and come to the same conclusion everywhere: this should work.
But it doesn't. Can anyone help me out why this page isn't:
1. refreshing as long as I have the javascript in there (and yes, js is enabled in my browser)
2. refreshing to the new page in the top frame
Any help would be appreciated!
Javascript won't work in the refresh meta tag like that.
As you're using javascript anyway, keep it simple like this:
<script type="text/javascript">
window.top.location = 'http://domain.tld/whatever/';
</script>
But there's also a better (because smarter) way to do it. This doesn't require you to hard-code the URL for each page. It checks if the page is topmost and if not, if calls the page's URL to the top:
<script type="text/javascript">
if(window.top.location != window.location)
{
window.top.location.href = window.location.href;
}
</script>
And if you would prefer to completely avoid using javascript (which some users will have disabled), there's also an even simpler way to do it. Add the following to your head section and all links on that page will open "topmost":
<base target="_top">
All you have to do is to choose one of these three options. All of them should get you going just fine.
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!