JavaScript Bookmarklet; click button, reload page, then open page - javascript

I am trying to create a bookmarklet that follows this process:
From any page, click the bookmarklet
load a specific page.
Trigger an input button which causes page to reload
Once reloaded; open a new page; in this case a social media page.
This is what I've written so far:
if (!($ = window.jQuery)) {
// Inject jQuery to make life easier
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=SocialCredentials;
document.body.appendChild(script);
}
else {
SocialCredentials();
}
function SocialCredentials(){
$('input:submit').trigger('click');
window.open('http://www.facebook.com', '_blank');
}
The button submit click causes the page to process and clear the credentials of the user so they can visit social sites.
The above code works, but I want to make sure the page finishes loading before opening a new social media page.
Do I need to add some kind of wait() function? If I do add a wait method, will it kill the JavaScript and not open the new window? I'm fairly new to JavaScript, so I'm not familiar with these types of mechanics.
Edit:I should note that I don't have access or control to the page this bookmarklet will work on so I can't alter it's flow. What I'm trying to do is more of a favor for another department as a quick fix until they can make changes on their end.
Edit2: Updated the process.

If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.

Related

Can you stop a prior page from reloading when "back" button is clicked?

Doing some Intranet development. The design approach uses a basic HTML framework populated with an ajax call (via jQuery) to populate the page. We've standardized on Chrome for Intranet access. The intranet allows the user to open PDF documents linked from the page in the same window, and then use the back button to return. Our old "static" page approach retained the prior page contents - the new dynamic approach reloads the page. How can we retain prior page content?
Research has found similar problems, but not a clear answer. We've tried checking for an existing element in the onload() event; doesn't work because the page load is already triggered before that code gets evaluated.
The code is working correctly - our desire is to return to the already rendered page.
No errors. Getting page reload with the back button when we want to return to the already rendered prior page.
You could modify the url via the history api when you are changing the page content. This should be enough as history gets modified so the back function would work properly. However if this doesn't work you can use the url to determine what to show up on the page.
Here's an example: https://css-tricks.com/using-the-html5-history-api/#pushState-example

Keep JavaScript injection despite of refreshing the page

I want to inject some JavaScript code that loads a new page and then executes a function. But when it loads the page, it doesn't execute the rest of the code. I have seen on the internet, that when a new page is loaded or refreshed the JavaScript console is cleared. I have tried with a Chrome extension that injects the JavaScript code, and it doesn't work neither.
What can I do? Here is the JavaScript code:
var button = document.getElementById('skip_bu2tton'); // ID of the button
setTimeout(function(){
button.click();
alert("OK");
},12000);
window.open("**URL**","_self"); // URL opened in the same tab
There is some way to make the Chrome Extension Injector to make this automaticaly, so it must open the URL, wait a few seconds, click that button and repeat that process over and over again.
I think chrome local overrides might be just what you are looking for.
Here's the info how to use it: https://developers.google.com/web/updates/2018/01/devtools#overrides

Page Monitor Bookmarklet That Clears Cookies or Cache After Each Reload

Okay I changed the plan. How would I create a bookmarklet that refreshes a link and clears cache until a page change is detected?
Edit: this might help (from JavaScript Bookmarklet; click button, reload page, then open page):
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Edit 2: this refreshes the page, so now I just need to clear cache on each refresh and stop when a page change is detected (overall function is like a page monitor but clears cache after each refresh).
---or----
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())};
}
Edit 3: found this for clearing cookies (which should be sufficient):
Edit 4: this checks for page changes:
Now how do I put this together?

Controlling parent window after link (JavaScript)

I'm using a form handling service which after hitting submit links to an intermediate page before using setTimeout() to link back to my original page. I would like to cover the ugly intermediate page with something nicer. So far I've tried having the submit button load a new window onClick, where the new window uses parent.write to open a div that would cover the entire page and allow me to write my own html. The problem with that is that it prevents the intermediate page from loading at all, and thus prevents my forms from being processed.
My current workaround involves using setTimeout() in the child window to load my own page immediately after the intermediate page is loaded. It works, but I still see the intermediate page first.
Please help me!
switched to 000webhost and wrote my own formhandler

Using AJAX for page items while still allowing them to be opened in a new tab/window

I'm looking at using AJAX to allow some content within part of a page to be reloaded without reloading the entire web page (eg things like overview, reviews, specifications, etc pages about a single item).
The problem is however I still want to allow users to open these items in a new tab or window (using the normal systems for their web browser such as right clicking the link and picking "Open Link in New Tab) rather than just left clicking the link).
Is it at all possible to do this, or is it just generally best practice to reload the entire page in cases like this?
It's very much doable. You simply need to provide an href and an onclick in your links.
The href will activate if the user has no JS, or if the user decides to open the link in a special way (new tab, etc.)
The onclick will activate on "normal" clicks of the link. You can then cancel the default action (by returning false or using your JS lib of choice's way to do it) and do your ajax stuff.
It is possible, in fact its even possible to set up a timer to update portions of pages periodically. If you are using jquery it'd be something like this:
setInterval(function() {
$('#your-div').load('your-server-side-request.php');
}, 3000);
of course you could simply bind to a link, and on refresh use .load().
OR you could even just do this with normal javascript and use my script above as pseudocode essentially.

Categories