Constantly execute javascript code on some webpage - javascript

What I would like to achieve is this:
I load some webpage and here are some clickable contents like buttons, clickable divs etc. What I want to achieve is: I want to constantly run javascript code that will click some buttons then after that wait for 15 seconds, refresh the page and repeat. (Yeah, some kind of a bot). I know how to achieve clicks etc. I will manage with the code but how to achieve such a functionality? I know that there was some extension for Chrome to do such things, but I can't remember now. Would be grateful for some tips.
I tried creating my own html file and dynamically loading whole html of the page I want the bot to work on into div of my html file. Something like this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load remote content into object element</title>
</head>
<body>
<!--<div id="siteloader" style="width: 1000px; height: 1000px;"></div>​-->
<div id="siteloader"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$("#siteloader")
.html('<object data="http://linktowebpage.com"/>');
</script>
</body>
</html>
The problem is: it creates an iframe and it is so small and I can not make it any bigger (it's like 150x150 px).
As I say I would like to do it without doing such stuff (creating my own page etc.).
Would be grateful for any tips ;)

As far as I understand, you want to run your JS on some third party page. With <iframe> it won’t work because you could read page contents, at best.
You could write a code that does everything and run it in console. But, for instance, if you wanted to use jQuery, a page would have to have it. So the safest option in this case would be to have it written in pure JavaScript. The downside and disqualifying issue, as I guess, is you have to run it everytime after refresh.
In your case you could use a tool like Tampermonkey (Chrome) or Greasemonkey (Firefox) which allows you to run your JS per domain.

Use setInterval() to do the function repeatedly and ajax() to load the page.
Check below example to get started.
var i = 1;
setInterval(function() {
$.get("http://linktowebpage.com", function(data) {
$('#siteloader').html(data);
});
}, 60000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Specified URL will be loaded every 1 minutes</div>
<br>
<div id="siteloader"></div>

Related

Can I use JS to add async to a script tag in an iframe in such a way that it will actually affect the script page loading?

It seems that the Stripe JavaScript is adding nearly 1/2 a second of main-thread blocking to my site. According to the Stripe documentation, it's totally fine to either async or defer their JS. In fact, they say that if you include it through npm it does this automatically. This is probably what I would have done if I were implementing this on my own, but I'm using Stripe through a WordPress plugin that, whatever they're doing, is pulling the Stripe JS in through an iFrame, and not setting async:
<iframe name="__privateStripeController5481" ...>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://js.stripe.com/v3/fingerprinted/js/shared-0950781806f615c0693abdcbbb4bfc19.js"></script>
<script src="https://js.stripe.com/v3/fingerprinted/js/controller-842819e3871bc12ac5b51fa16b375c03.js"></script>
</head>
<body></body>
</html>
</iframe>
I'm thinking there should be some way to fix this, without waiting on the plugin developers to do it on their own. My idea is to do something like:
document.getElementById('ifrm').onload = function() {
const ifrm = document.getElementById('ifrm');
const scripts = ifrm.contentDocument?
ifrm.contentDocument: ifrm.contentWindow.document.getElementsByTagName('script');
for (const element of scripts) {
element.hasAttribute('async') ? {} : element.setAttribute('async', '');
}
};
But onload, will, I'm pretty sure, be way too late. Is there a way to accomplish this modification such that it happens early enough that the scripts in the iFrame end up being non-blocking?
No, you can't change how the script tag is processed after the browser has read it from the HTML and started processing it. (Not least because your page and the iframe are running on the same one main UI thread — the very thread being blocked by that script tag.)
You'll have to modify the plugin's code. (And perhaps do a PR to get it adopted by the plugin project maintainers.)

Redirect to another page without loading current page in jquery

I want to redirect to another page from 1 page without showing contents of that page using javascript/jquery.
So for example I would be either typing or coming from a search engine to a page on my website say www.mysite.com/aaa/ and I should get redirected to www.mysite.com/bbb/ without showing the contents of www.mysite.com/aaa/.
The server side is asp.net and I can do this using Response.Redirect but I do not want a code change.
From my limited knowledge, I cannot use document.ready or window.load as both will load the contents of the page in the browser before redirecting.
I am not aware of any other thing which would help me achieve this. Tried hard searching but could not get anything useful.
I got something here. I can have this in the header but right at the top of the header might not be possible. Plus the answer is not looking very convincing. However, can try it out and update this question with the findings.
Please help!
Thanks in advance!
When the the web browser engine reads an HTML document and identifies a script element, it immediately invokes the JavaScript interpretator and executes the code. So, if your document starts with a JavaScript which redirects away from the page, the client shouldn't be shown the remaining document. Something like this could work:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
//using "replace" removes the current page from browser history
location.replace('page_b.html');
</script>
Also, if there is something on the current page that should not be displayed to the client while the redirect is in process - you can inject some additional CSS, like
<style type='text/css'>
body {display:none}
</style>

Calling a content page's javascript from a master pages javascript

I am working on a web app that can display data in two drastically different formats. To do this, I am using a master page with two different content pages for the differing views. I am using .svc files to do AJAX style server requests. I would like to be able to do a service call from the master pages javascript, then run the appropriate onSuccess javascript method (which would ideally lie in another .js file) to display the data based on which content page I am in. I am guessing this would be done with some kind of function delegate, but I am new to web development and not sure how to do this. Any help would be greatly appreciated.
If you can do everything on one page, your HTML will probably look something like this:
<!DOCTYPE html>
<html>
<head>
<script src="masterScript.js"></script>
<script src="module/childScript.js"></script>
<script>
console.log(globalVariableFromMasterScript)
doSomethingFromChildScript(globalVariableFromMasterScript)
</script>
</head>
<body>
<p>This is the html page</p>
</body>
</html>
This was a stupid question... Just attach different js files to the content pages. Give the functions the same name and it works fine.

JQuery interferes with bokeh.js. Why?

TL;DR: my index.html declaration of jQuery with bokeh.js interferes with the ability for the script tags in the php page to manifest themselves into the div that they are supposed to be loaded into. Why?
I've been trying to embed the output of graph.create_html_snippet() from the python bokeh package. I was having so much trouble that I made a separate test html page just to post it to SO, when I discovered that my test page worked! Here it is:
<html>
<head>
<script src="js/bokeh.js"></script>
<script>
$(document).ready(function() {
$("#get_graph").click(function() {
$("#show_graph").load('hello.php');
});
});
</script>
</head>
<body>
<!-- click this to bring up graph -->
<div id="get_graph" style="width:100px;height:30px;background-color:#ddd;">Show graph</div>
<div id="show_graph"></div>
</body>
</html>
And hello.php is here:
<?php
echo 'hello';
?>
<script src="31b1ad52-e095-4ba1-89d0-69f0b898d677.embed.js" bokeh_plottype="embeddata" bokeh_modelid="31b1ad52-e095-4ba1-89d0-69f0b898d677" bokeh_modeltype="Plot" async="true"></script>
So now, confronted with the mystery of why it wouldn't work on my real page (not posted for brevity) and why it would work on my test page, I started subbing things in and out until I added this to the head of the my test page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
And then things stopped working. But then I realized, wait a minute, how did my original test page work in jQuery if I didn't give a script for jQuery in my <head>? I went back to my main page and deleted the JQuery script, and suddenly the embeddding worked okay. So I went into the bokeh.js script and found a bunch of calls to jQuery I don't quite understand.
Why is my declaration of jQuery interfering with bokeh.js? When I load the php page using a jQuery declared html page, the html element the php was loaded into will not have the script tags loaded into it, but all other php commands are okay. What's the deal? Since I solved the question while writing this, I guess my question is more out of curiosity/help for people who might run into the same thing, since embedding bokeh using php is one of the best applications for it.
Thanks for any help.
This is a recently discovered issue, you can track progress at:
https://github.com/ContinuumIO/bokeh/issues/554
There should be a point release that includes a fix for this very soon.

JQM: How to break while debugging in a JS file loaded through $.mobile.changePage()

I am developing a mobile app using jQuery, jQuery mobile (and PhoneGap, but that is not relevant). Let's say I have two html pages: page1.html and page2.html. I am loading page2.html using $.mobile.changePage() from page1.html. The page div in page2.html (i.e., the div having data-role="page") contains javascript code that is specific to page2, which also gets loaded with page2.html. The code in page2.html looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="conf-page" data-role="page">
<script type="text/javascript" charset="utf-8">
<!-- MY SCRIPT HERE ----->
</script>
<div data-role="header" style="height: 45px">
Now I want to break somewhere in the javascript code in page2.html. For the time being, I am using Firefox (16.0.2) and Firebug to develop and debug. When page2.html is loaded, I see the JS code of page2.html at two places in firebug Scripts list:
At jQuery.min.js/eval/MD5/
At jQuery.min.js/eval/seq/<#>
If I put a breakpoint somewhere in one of the codes, it get applied to the code in (1) above, but it is never hit when page2.html is loaded.
How to go about setting a breakpoint and breaking somewhere in the JS code in page2.html? I couldn't find anything relevant on the web, which makes me think that I must be missing something, as this must be a pretty common requirement.
Looks like I was searching for different terms. There has been some discussions on this problem in this site. Here are a few references:
dynamically loaded js function does not appear in Firebug js debugger
Scripts added via jQuery not visible in FireBug
Debugging scripts added via jQuery getScript function
A few other ones.
There are two solutions suggested in the above threads:
Most of these threads suggest the same solution: use the "debugger;" statement (w/o the quotes) twice in the code for the FireBug debugger to stop. I did that, and it was a partial solution: the firebug did break, but the variable stack was empty. So this wasn't very useful.
Put the script in a file, use an AJAX Get call to load the script with crossdomain set to true, and that gets the script file, loads it and the script file shows in debugger. That can be used now to set breakpoints etc. More useful than above.
Keeping open to see if there are other solutions.

Categories

Resources