Good Day
I have never really used the browser console before, so I don't really know what it is capable of doing - What I want to achieve is the following:
How do I force/initiate an automatic refresh on a page from the browser console? That is, instead of having to press F5 everytime?
Also, does the console take jquery? Or does it depend on whether the web page you are on uses jquery or not?
Thank you!
Use a browser tab "A" to open and control another browser tab "B". This allows you to continuously auto-reload a Web page in tab "B" that otherwise you have no control over. Your reload command from tab "A" will not be wiped out when tab "B" is reloaded.
I use this to refresh a Website so that it does not time out and log me out. This approach does not require jQuery, and does not require you to have any control over the target Web page HTML code.
Open a browser new tab "A", press F12, select Console. Type in something like this:
win1 = window.open("https://www.example.com");
timer1 = setInterval(function(){win1.location.href="https://www.example.com"},10*60*1000);
The "win1" is to assign a Javascript variable name to the new browser tab "B", so that you can have Javascript control over it. The "timer1" is also to assign a variable name for good practice and for later control. The setInterVal function runs an anonymous function to call "win1" or tab "B" to refresh it's "location.href", every 10 minutes.
You'll probably have to keep both tabs open. "Pin" them for easy access. Close both tabs to stop the auto-reload. Hard refresh of tab "A" may also stop the auto reload. You might also be able to use the variable "timer1" to cancel the auto reload.
You can refresh a page from within the browser console by running the following command:
location.reload()
If the website you are on has jQuery loaded you will be able to run jQuery commands.
If the website does not have jQuery loaded you can use the following bookmark to inject jQuery into the page:
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){(function(){var d=document.createElement("div"),c=document.getElementsByTagName("body")[0],e=false,g="";d.style.position="fixed";d.style.height="32px";d.style.width="220px";d.style.marginLeft="-110px";d.style.top="0";d.style.left="50%";d.style.padding="5px 10px";d.style.zIndex=1001;d.style.fontSize="12px";d.style.color="#222";d.style.backgroundColor="#f99";if(typeof jQuery!="undefined"){g="This page already using jQuery v"+jQuery.fn.jquery;return f()}else{if(typeof $=="function"){e=true}}function a(i,k){var h=document.createElement("script");h.src=i;var j=document.getElementsByTagName("head")[0],b=false;h.onload=h.onreadystatechange=function(){if(!b&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){b=true;k();h.onload=h.onreadystatechange=null;j.removeChild(h)}};j.appendChild(h)}a("http://code.jquery.com/jquery.min.js",function(){if(typeof jQuery=="undefined"){g="Sorry, but jQuery wasn't able to load"}else{g="This page is now jQuerified with v"+jQuery.fn.jquery;if(e){g+=" and noConflict(). Use $jq(), not $()."}}return f()});function f(){d.innerHTML=g;c.appendChild(d);window.setTimeout(function(){if(typeof jQuery=="undefined"){c.removeChild(d)}else{jQuery(d).fadeOut("slow",function(){jQuery(this).remove()});if(e){$jq=jQuery.noConflict()}}},2500)}})();});
If you want to use the console just type document.location.reload() in the console. But if you want to make it automatically - it needs to be in your code.
And yes, the console will take jquery if you have included the library in your code.
One more thing: for automatic refresh you need something like
setInterval(function(){ document.location.reload() },10*60*1000);
But it not gonna work in the console, because after the first refresh this code won't be in the console anymore. Just place it in your code.
You can use like
document.location.reload()
If your webpage includes jQuery. then jQuery will be avaliable in the console:)
To refresh you can type directly in console:
window.location.reload()
The simplest way is to you use a plugin.
"Super auto refresh" for example. Available for most of the browsers
Adding to #saeng's answer, in case you need to stop the interval after a certain period of time.
Open the console and write the below-mentioned snippet.
INTERVAL = 5 // seconds
STOP_AFTER = 15 // seconds
// Open the same link in the new tab
win1 = window.open(location.href);
// At every 5 seconds, reload the page
timer1 = setInterval(() => {
win1.location.reload();
console.log("Refreshed");
},INTERVAL*1000)
// Stop reloading after 15 seconds
setTimeout(() => clearInterval(timer1), STOP_AFTER*1000)
It will open a new tab with the same link and reload it at some interval. After a certain period of time, it will stop reloading.
Add this javascript
setTimeout(function () { location.reload(1); }, 5000);
Add this below meta tag to your page
<meta http-equiv="refresh" content="5; URL=http://mywebsite/mypage.aspx">
Many Thanks
ann
Related
I'm looking for a way to recreate the functionality of a refreshing page extension on a browser (e.g. Auto refresh plus in Chrome) by using javascript. The problem is that I have no ideia how to achieve that.
I must find a way to refresh the page every second or so, click on a link that appears on the page from time to time, add a sound effect for when it appears and send an e-mail notification every time it appears.
I'm trying to use a simple javascript snippet to run in the console in order to refresh the page:
win1 = window.open("https://www.myUrl.com/");
timer1 = setInterval(function(){win1.location.href="https://www.myUrl.com/"}, 1500);
However, this implies running code from tab A on tab B which I found very challenging.
The code can't run on tab A alone because at the time it refreshes the page, it gets erased from the console.
I know it would have been so much easier to use an extension, but the platform I work for does not allowed any extensions.
I have basic HTML and javascript knowledge, but I find this would be a good project to learn more.
Also, if the solution involves other languages, I just need a direction to know where to look for and start this project.
Let's say I want to stop all videos from playing in the browser so while on the youtube.com page I run HTMLVideoElement.prototype.play = function() {}. I click around and since it doesn't do a full page refresh the JS persists.
However, if I press refresh, then my JS is reset and HTMLVideoElement.prototype.play once again points to native code. Is there a way to persist that command even on page refreshes?
JavaScript is run anew on every page load. This is by design and cannot be changed. Use a browser extension or a userscript that runs the script on each page load.
Things run on the console will be lost when the page navigates away (that includes navigating to the same page you're already on).
Is there a way to persist that command even on page refreshes?
Yes. So long as it's a page you control (so, not youtube.com) you can persist a setting before and after a page refresh by:
adding a hash fragment to the URI;
adding a query string to the URI
placing a cookie
using the window.name property
using HTML5 Web Storage (localStorage / sessionStorage)
By using javascript to query any of the above after the page reloads, you can re-establish the setting you had in place prior to the page refresh.
Can I not use setTimeout() in a bookmark?
This works:
javascript:
document.location="mysite.com";
alert("test");
void(s);
This does not:
javascript:
document.location="mysite.com";
var t=setTimeout(function () {
alert("test");
}, 10000);
void(s);
Why is this?
Each time you change a page the entire javascript context is destroyed and recreated(This for security reasons and the fact that a context hell would be made)
document.location="mysite.com";
efectively changes the context of the page destroying any javascript reference left(in your case the timeout). The moment the new page has started loading your page has a new context.
for your timeout to work you would need a server that takes more than 10 seconds to respond(based on your second argument 10000 or to reduce the timeout to something like 10 ms).
document.location="mysite.com";
var t=setTimeout(function () { alert("test"); }, 10);
why would you need this?
Bookmarklets can do no more than what normal embedded script on a web page can do. If you can't do it with normal JavaScript, you can't do it with a bookmarklet.
In your example, if run as normal javascript embedded in the page, as soon as the page reloads the timeout would be gone, along with all other variables from that page. (Don't be mislead by the fact that JavaScript embedded in script tags will be re-run as the page is loaded. That would create a new timeout, but the previous one would be deleted.)
A more precise test would be to put your bookmarklet code into an a hyperlink on the page and click it (test). That is exactly the same as clicking a bookmark containing the same code. What you cannot do with this, you cannot do with a bookmarklet.
SOLUTIONS TO YOUR PROBLEM:
Option 1: Bookmarklet creates an iframe inside the current page, and continuously reloads the desired page inside that iframe.
Option 2: Bookmarklet opens a small window and inject javascript into it which continuously reloads the opener window.
I want to set a cookie when a visitor on the page closes the browser.
I used onbeforeunload method like this
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
followed this link
But found out that even refresh of page or click on any hyper link on the page,pops up an alert.
I need to set cookie only when visitor clicks cross button of browser and not on page refresh.
I followed some of the links like the one above and another here. And found from the post that we can not differentiate between close and refresh. But those posts were 3-4 years back.
Is there is any way to differentiate these events using JavaScript or Jquery?
I'm afraid you have no way to tell.
The only thing you can do is overload clicks on links and set a flag. But you can never know if it is a refresh or a close...
Hmm, what about this:
Set a cookie onbeforeunload
Globally onload, check the timestamp of the cookie to see whether this was a link, or a new session
If the timestamp difference is only a few seconds, delete the cookie
Well, unload is called when browser is closed and onload is called when you try to reload. You can use these properties and set flags , and fire events accordingly
Browser close and reload Check this link for more details
Here's what I need to do. I'm using Google Chrome. I have page that auto-reloads every 5 seconds using a script:
javascript: timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload()
{
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>'; fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
I found that script by Googling.
The reason why the page auto-reloads every 5 seconds is I'm waiting for a specific link or url to appear in the page. It appears at random times. Once I see the link I'm waiting for, I immediately click the link. That's fine.
But I want more. What I want is the page will auto-reload and I want it to auto-detect the the link I'm waiting for. Once the script finds the link I'm waiting for, it automatically loads that link on a new tab or page.
For example, I'm auto-reloading www.example.com. I'm waiting for a specific url "BUY NOW". When the page auto-reloads, it checks if there's a url "BUY NOW". If it sees one, it should automatically open that link.
Thanks.
For inspiration, check out what I have done it in my Chrome Extension "Auto-Reload". The code is here.
You should create yourself an extension (from what I understand of your question, that's what you are implying). Once the page reloads, you can use jQuery (for example) to scrap the page for your link.