Adding and Loading Javascript to a Browser via Javascript without reloading - javascript

I have a SWT Browser in an Eclipse RAP Application, where i load something on my local server and display that html.
the url looks something like this:
"http://localhost:port/......./myhtml.html"
I want to add script sources into my html without reloading the page. Currently i am doing this with a Javascript which i execute in the Browser.
var script = document.createElement('script');
script.setAttribute('src', 'SOMESOURCE');
document.head.appendChild(script);
This does work that i end up having the script tags correctly added to the HTML DOM, however it does not load the references, so i can't access anything defined in these script references. But calling something like
window.top.location.reload(false)
doesnt work either because this reloads the HTML and therefor removing my inital added script tags.
The main problem here is that i am very restricted because of the tecnologies we are using here, so i am only able to execute javascript queries in my browser.
PS:
For testing you just can open any Browser like Chrome and Firefox, open its Developer Toolkit and type that script into the console. The website doesn't matter.

Thanks for #JensV for helping me.
The Problem was although i added my script it didnt load its content. So what i was as described in the question.
However as mentioned from #JensV in the Bug
load scripts asynchronously
it is described to use a Promise object this would handle the load and error events.
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
So what i did was first execute that Javascript and therefor adding this function, and then just execute it with the desired source.
Thanks for #JensV again, you might wanna flag this as duplicate, however i think my problem was a bit different then that.

Related

JS function works on chrome console but not when load from plugin

So I have a webpage with a function applaud. When I call it from the console, I get the normal return:
applaud(3004,1935);
undefined
However, if I use CTG plugins (simple plugin to run a js script), with that code
applaud(3004,1935);
I get the following error in console:
3VM5444:1 Uncaught ReferenceError: applaud is not defined
at <anonymous>:1:1
(anonymous) # VM5444:1
and function isn't working.
Do you know how I can use it?
Thanks.
I know this is a bit outdated, but I can answer this. (I made the extension in question.)
Chrome Extensions by default insert scripts into a webpage in a different context than the rest of the page. This is for security reasons. If you'd like to run code in the context of the webpage, you'd need to use a little workaround.
In the script that the Chrome Extension injects, have that inject a <script> tag into the body of the page. Then that script will be loaded and be able to execute the functions like you can in the console.
Here's a demo of code that can do what I'm talking about:
//Create a new script element.
var script = document.createElement("script");
//Get the function you want to inject as a string and add it to the script.
script.innerHTML = injection.toString();
//Add a call to that injection function so it'll automatically execute once it's injected.
script.innerHTML += "injection();";
//Inject that newly created script into the body of the page.
document.body.appendChild(script);
//The contents of this script will be run inside the same context as the webpage.
function injection(){
applaud(3004, 1935);
}

Unable to load script from another server - Content Security Policy issue?

I have been trying to turn a bookmarklet into a small development environment that I can use for testing some javascript and sending commands easily on the fly and updating the code on my server quickly to see the result. This has half way worked using method's I have found in this site and google however it doesn't seem to work very well and sometimes randomly doesn't work. The end goal is to have a bookmarklet that I can click on from any page and it loads a javascript file I have saved on my server. I have created the following two bookmarklets to try and get this working:
Failed Method 1:
javascript:
var s = document.createElement('script');
s.type='text/javascript';
document.body.appendChild(s);
s.src='//smewth.com/test.js';
void(0);
Method 1 in one line bookmarklet form: javascript: var s = document.createElement('script'); s.type='text/javascript'; document.body.appendChild(s); s.src='//smewth.com/test.js'; void(0);
Failed Method 2:
javascript:(
function(){
var imported = document.createElement('script');
imported.type='text/javascript';
imported.src = 'https://smewth.com/test.js';
document.head.appendChild(imported);
})();
Method 2 in one line bookmarklet form: javascript:( function(){ var imported = document.createElement('script'); imported.type='text/javascript'; imported.src = 'https://smewth.com/test.js'; document.head.appendChild(imported); })();
I got method 1 by decomposing the kickass bookmarklet from (http://kickassapp.com/). The actual one I got from their site works fine on my browser no problems. I even did a direct substitution from the URL they were using to load with my URL. The second method I found while searching on this site and this actually worked for a small while and stopped working for some unknown reason (maybe different browsers). I tried appending this script object to the head and the body on each of them with no improved results.
I created the test.js script just for this post and it contains a simple alert box statement:
$$ [/]# cat test.js
alert("hi");
$$ [/]#
NOTE: When I do this with the code embedded within the the bookmarklet itself without appending it to a head/body object then it works fine such as this:
javascript:%20alert("hi");
I did notice that with both of these methods, the code is actually getting injected into the page however I am not seeing the code is ever executed when I click the bookmark. Does anyone know which method is the best or something similar to do this so I can have javascript load through a page which I update on a remote server (reliably)? Maybe I need to attach the to a different object?
Thank you for your help.
-Jeff
UPDATE: I am showing this works while this site is loaded but it doesn't work when your at a site like google.com. Not sure what the difference is or how to accomodate this, google.com has a head and a body object too. I am showing this works in some sites and in some it doesn't.
I figured this out. There were two things occurring which accounts for the intermittent symptom of this issue. The first issue was that the site which was hosting the code was on a self-signed certificate. I began to notice the issue was occurring only when trying to run this from within secure sites. Then in Chrome I saw a error show up in the console. It would be nice if Firefox gave me a error on the console or something as this was the root of the issue. The second thing I had to do was disable OCSP in Firefox as I used a free certificate for testing purposes.
I also had to use method 1 as described above. Firefox and Chrome both did not like the anonymous function call for some reason. From now on I will refer to Chrome to look for errors in the console as Firefox has proven itself not very useful for this.

update javascript function

This should be a simple problem, I just can't seem to stumble upon the right answer:
So I have a site in HTML with many pages that all link to the newest one, so I created a simple JavaScript function in a separate file:
function newest() {
window.location = "http://xxxxxxxxxx.xxx/6.html";
}
With the line:
< script type="text/javascript" src="javascript.js">< /script>
In my HTML document.
So I can update the number every time a new page is posted. The problem is that when I post a new one, the code doesn't refresh from the user side until you delete the cookies (if I replace it with 7, it will still redirect to 6).
Sorry if it is a stupid question, but everything I have looked up seems way off topic.
The cache expects your javascript to me immutable so unless you can include the file name external to your javascript then this path is not going to work... How about just creating a 'latest.html' page that is either a file system link to the original or else redirects to the latest version.
A simple client side solution would be to inject the script with different version attributes appended to it.
So HTML page can contain a script like :
var script = d.createElement('script');
script.type = 'text/javascript';
script.src = 'http://xxxxxxxxxx.xxx/javascript.js?v=' + Math.random();
d.getElementsByTagName('head')[0].appendChild(script);
Notice the random number?
where javascript.js is the one having your code:
function newest() {
window.location = "http://xxxxxxxxxx.xxx/6.html";
}
You can turn off the caching of the resources (javascript files) on the client machine by adding the instructions in your code for the web browser, not to cache. Refer to this link for how to turn off caching for your webpage.

Open new page in the same broswer window without affecting the browser history

The question is for IE7 only, because location.replace(strURL) seems to work file in all other major browsers.
I try to execute some analytics js and then redirect the users to the location of a resource (usually doc or pdf) they want to download.
The user opens a page containing the js code.
After the download is tracked the broswer should load the resurouce url using the following code by REPLACING the current page entry in the history with the resource url:
if (IE) {
window.open(strURL,"_self", true); //doesn't work
//window.open(strURL,"_self",undefined, true); //doesn't work
return;
}
This code creates entry in the history for the redirecting page.
I have tried using iframe on the same page but IE will pop up a security warning if the file is a *.doc
Any ideas?
I'm not sure if there is a way to avoid this in IE7 or not. Perhaps a different approach is possible. Inject the analytics js into the current page before redirecting, thereby avoiding the need to load another page altogether. In this approach, you would create a new script tag and inject it into the head element. The script will execute when it loads, do your analytics and then trigger the redirect for download as the last step (for instance).
function redirectWithAnalytics() {
var s = document.createElement('script');
s.src = 'path/to/analytics.js';
s.type = 'text/javascript';
document.getElementsByTagName('HEAD')[0].appendChild(s);
}

Bookmarklet, js injection and popup issue

I'm currently writing a bookmarklet that loads and executes a remote js file by appending a new <script> tag in the current window, like so :
javascript:(function() {
if(typeof __bml_main != "undefined") return __bml_main.init();
var s= document.createElement('script');
s.type= 'text/javascript';
s.src= 'http://127.0.0.1:8000/media/bookmarklet.js';
void(document.body.appendChild(s));
})();
My bookmarklet needs to perform some dom manipulations in order to extract data from the page being viewed, and then to open a new popup to list them.
The thing is : if I want to bypass pop-up blockers, I can't open my new window from the injected script. I need to open it right from the beginning in the bookmarklet code, and to access it later when needed.
I've tried to do somehting like this :
javascript:var my_popup = window.open('http://127.0.0.1:8000/resources/manage/new/', 'newResourcePopup',config='height=200,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,directories=no,status=no');
(function() {
// script injection (...)
})();
but if I then try to access my_popup from my remotely loaded script, most browsers will throw a security warning and won't let me access the Window object. This is understandable since the script is not from the same domain than the displayed page, but I'm kind of stuck...
A solution would be to use a div overlay, but I'd really prefer to open a window in this case.
Any hints ?
You could load the markup for the window as a string in your bookmarklet.js file, then (later) use window.open without a URL (or with "about:blank", I forget which is more cross-browser-compatible), and use my_popup.document.write to write the markup to the new window.
You may find that you can't open the window later, even without cross-domain issues, unless you're doing so in direct response to a user action — which is probably a good thing. :-)

Categories