If I'm loading a script using something like
document.getElementsByTagName("head")[0].appendChild(scriptElement);
…what code can I put inside of that loaded JS file to get the URL of itself?
In other words: I use dom injection to load http://foo.com/foo.js. From within foo.js, how do I get the URL http://foo.com/foo.js?
If you have included the scriptElement object in your dom, then you should know the "scriptElement.src" - so inside foo.js you should know the source:
alert(scriptElement.src);
I've found a solution that works for me here:
javascript - get node reference to script tag that calls a function
The answer that requires you to throw an error in the loaded file, catch it, and then pass it to the global function in the loading page did the trick. (It doesn't work in IE, but for my current project that is not a concern.)
Related
I try at the moment to hook a Javascript function in a WebGame.
The problem is that this function isn't available in the global DOM. The only way that I get it working, is to set a breakpoint in the browser debugger, override the function in the console and let it run again. Unfortunately the whole JS-Code is Obfuscated and loaded via a webpack lib.
My question is now, is there any way to find that function from outside or to automate the "breakpoint way"? I want to load my hook without to set manual a breakpoint.
I tried to find the function with that: Recursively search for a value in global variables and its properties but without success.
The Solution was to use greasemonkey and a simple python flask server.
The greasemonkey script prevent that the js file get load, instead its load the script from the flask server, that download the js and modify it.
I linked all the javascript files in the header.php at atime. I included header.php in all pages
When I link the javascript files like this
<script src='js/home.js'></script>
<script src='js/disc.js'></script>
<script src='js/que.js'></script>
only last file js/que.js is working.
Make sure that the 'src' is referring to the correct file directory where the script is located. If you are using an IDE such as VS, then you may drag the file into the code and the IDE will automatically create the reference for you.
Unless you have problem with directory structure or you file name does not match with src attribute of script tag, there should not be any problem with. Please try to use type="text/javascript" and make sure your script tags are after header tag or just before </body> tag. Also keep sequence of files loading if any file depends on another file variable or any function. If it still does not work use try to see if there is any error in your code in console window.
I now I'm going to get voted down for this but oh well. I don't have enough points to comment which is what I would do but..oh well.
Okay it depends on what the scripts are doing. If you link the scripts in the head for you HTML page, and try a var element = document.getElementById("theID"); this will return null due to the fact that the browser has yet to read the HTML and hasn't had a chance to create a DOM (Document Object Model) tree. For a problem like this check out
<script>
function load() {
console.log("load event detected!");
}
window.onload = load;
</script>
This will assign window to an event/callback that will be invoked after the page has had time to load.
Look at where your JavaScript is used, and what it should be doing. Would those elements be rendered yet. Are you writing functions but not actually calling them (this happens A LOT)? It would be better if you described what the code was doing and your experience with HTML and JavaScript. Remember that the browser interprets the JavaScript as it encounters it, you can put script tags anywhere in your HTML file, not just in the head. Also are the .js files in the same directory as the HTML file or are the two non working .js files in the same directory as "js/que.js"? If not move them to the same file or use a relative or absolute path.
I need to load some Javascript dynamically after the page has loaded.
Something like this:
page loads
page adds script element with src = "file1.js"
page adds script element with src = "file2.js"
file2.js has a dependency on file1.js - it adds properties to an object defined in file1.js
The problem is that file2.js is loading first (because it is smaller), and is immediately throwing an error because its dependency doesn't exist.
Is there a way for me to defer evaluation/execution of these new scripts until they have all loaded. (There is actually more than two scripts)
If I were to just embed these scripts in a page normally in authored HTML, then it seems that the browser loads all scripts, then evaluates them. But it is behaving differently because I'm adding script elements on the fly.
Thanks
There's a library called RequireJS that handles exactly this situation, and handles every situation you never realized were problems - http://requirejs.org/docs/start.html
Can't you wrap the contents of the files in functions and call them after everything has loaded?
Two suggestions for you:
Have a look at http://requirejs.org/ It solves this problem, among
others.
Or, roll your own simple js loader function. It would be a function that
uses ajax to load a script and then calls a callback when it's done.
Call this loader function in a nested way so that you load your
scripts in the right order.
This is probably a very simple issue, but I've been trying to use Firebase in an external javascript file that is being used with an HTML file and can't get it to work properly. I am planning to use this file for many other similar pages, so I'd rather keep it in an external document. Specifically, my code is:
$(function() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.src= 'https://cdn.firebase.com/v0/firebase.js';
head.appendChild(script);
var Database = new Firebase('https://myfirebase.firebaseIO.com/');
...
but when I try to run it, it says that the Firebase object/keyword is undefined. I know that the script is being correctly appended to the HTML page because I've checked the HTML on the page after running the code.
I have also read somewhere that you might need to have a personal server to run Firebase, but frankly I don't really know what that means - in any case, I use Mac OSX and run all of my HTML and Javascript in Chrome.
Thank you very much!
The problem is that using document.createElement does not force the script to be loaded and rendered before your inclusive script is invoked (it's being invoked now). There are no guarantees by this method on when the script you include will get invoked.
Additionally, you are loading the script onDomReady by putting it inside $(function() {...}); you would want to insert it into the header immediately, not wait for the entire document to load.
The simplest answer is to just put Firebase into the head of the html page; you haven't really explained your limitations here, but I assume this isn't an option for you. If it is, KISS.
Another simple answer is to utilize jQuery, since you obviously have it available.
$.getScript('https://cdn.firebase.com/v0/firebase.js', function() {
// now I can use Firebase
});
You can also accomplish this with other methods (wait until Firebase is defined using a setInterval; utilize other script retrieval methods besides document.createElement--try googling "load scripts dynamically via javascript load order"), but I think this covers your needs sufficiently.
Into my app I have included all needed JS files (my scripts, libraries such as Twitter Bootstrap etc.).
The problem is, that when I have a request which is called via AJAX, so in the called page are not included the JS files, which are included in my app and I have to include them into the called page.
Example: my_scripts.js contains lots of JS functions.
link to page called through AJAX
<a href="/articles/create_new" data-remote="true>Create New Article</a>
/views/articles/_create_new.html.haml
...some content of this file.. #here doesn't work the functions from the file "my_scripts.js"
when I put into the /views/articles/_create_new.html.haml this link
= javascript_include_tag "my_scripts"
...some content of this file..
so then in the /views/articles/_create_new.html.haml those JS functions working.
I would like to ask you, if exist any way, how to automatically put all JS files in my every single AJAX pages, because always include the JS files into an AJAX pages is not good way...
Thanks
use a script loader like RequireJS or $cript.
Have your pages reply 2 things also: the content and the scripts to load. This is best using JSON like:
{
"content" : "content here",
"scripts" : ["an","array","of","script","urls"]
}
then when the data is returned, parse and paint the content and after that, use the script loaders to load the scripts. Actually, you can make your own script loader. It's just a matter of dynamically creating a <script> tag, put it in the <head> and give it an src
I would achieve this in one of three ways:
jQuery
From http://api.jquery.com/load/:
Script Execution When calling .load() using a URL without a suffixed
selector expression, the content is passed to .html() prior to scripts
being removed. This executes the script blocks before they are
discarded. If .load() is called with a selector expression appended to
the URL, however, the scripts are stripped out prior to the DOM being
updated, and thus are not executed. An example of both cases can be
seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
However, in the following case, script
blocks in the document being loaded into #b are stripped out and not
executed:
$('#b').load('article.html #target');
Basically, you can add the JS references to the HTML returned by Ajax request and jQuery will execute them.
RequireJS or simular
Rather than return straight HTML, return the HTML as part of a JSON bundle that also contains an array of script references:
{
html: '<p>stuff</p>',
scriptRefs: [ 'js/one.js', 'js/two.js' ]
}
I would then iterate through the scriptRefs array with something like RequireJS.
Just add the code to base page
In all honesty, I'm more likely to just do this.