how to pass value to a js file - javascript

I know this question are asked hundreds of times :( but I just want to learn more :).
My question is simple, can I pass a value to a js file like this, if not, how ?
<script type="text/javascript" src="./js/create.js?method=create"></script>
Yes, you notice that I have a parameter method=create which I want to use in my create.js.
I know in jquery ajax, we have an easy way, but you must notice that the ajax method is in included in the js file, how could I pass a parameter to the js file itself ?
Any answer is welcome :)
Thanks.

This works perfect for me:
<script src="js/script.js" id="myScript" data-url="my_variable"></script>
inside the script.js file:
var myUrl = document.getElementById("myScript").getAttribute( "data-url" );
"myUrl = my_variable" inside the code
you can use myUrl everywhere.

Not really, no. What you can do is this:
<script type="text/javascript">
var method = "create";
</script>
<script type="text/javascript" src="./js/create.js"></script>
Another way is to only define functions inside your javascript file, and then invoke after it has loaded.
<script type="text/javascript" src="./js/create.js"></script>
<script type="text/javascript">
runMyLoadedCode("create");
</script>
Third way is belying my first simplistic answer: access the script tag itself and parse it. You can see here how to access the tag that has loaded your script; take its src value and cut it up to locate your method=create.

Related

Call javascript from HTML

I have a HTML file with the content:
<script src="http://spelprogrammering.nu/simple.js">
function test()
{
//Function stuff
}
</script>
However, I'd like to write all my javascript (Function test) in a separate document (.js). How do I refer to, or call, this separate file so I get the same result as if the code was directly in the HTML?
I need the http://spelprogrammering.nu/simple.js to ease the graphics handling in function test.
You already have what you need in your source.
<script src="http://spelprogrammering.nu/simple.js"></script>
In the html section, refer to the file that contains your javascript, I'm assuming the html file is in the same folder as that containing your script.
<script src="script.js"></script>
If the script is in a different folder...
<script src="/path/to/script.js"></script>
<script src="http://spelprogrammering.nu/simple.js"></script>
<script src="main.js"></script>
Where main.js contains your function.
I think that you say that? in this case you need to make difrent script calling your .js
<code>
<script src="http://spelprogrammering.nu/simple.js"></script>
<script src="http://spelprogrammering.nu/other.js"></script>
<script src="http://spelprogrammering.nu/other2.js"></script>

Best way to access external JavaScript file and place contents in div?

So, lets say you have a page that wants to load from a javascript file and it includes
temp.html file
<script src="example.js"></script>
<p class="one"></p>
Now in the example.js file you have a function that is
function getInfo() {
var place = "foo"
$(".one").html(place);
}
//Edit currently I call the function inside the JS file
getInfo();
My question is how would you connect the two files so that the external javascript file knows that it is pointed to the paragraph with the class one?
Normally when this is in a single page, you would call the function and the info will be set.
I have seen a getScript method and a load method for Jquery. Would that be applicable here?
Any ideas on how to approach this? If you provide some code that will be super helpful.
Thanks in advance.
Looks like you want to execute getInfo() as soon as it's defined (i.e.: example.js is loaded).
You can try this approach:
<script src="example.js" onload="getInfo();"></script>
In your example.js, change getInfo() to something like this:
function getInfo() {
$(document).ready(function() {
var place = "foo"
$(".one").html(place);
});
}
Your language is confusing, but you could use jQuery's $(document).ready function which would suffice. Generally speaking, an externally loaded file should execute where the tag is in the script.
A hack could be to place a tag before the end of your document body, give it an id, and then use $('#id').ready() there. In general though, you could just try coding the transclusion concept (I'm guessing you're used to this) from scratch using intervals and timeouts.
<div id="rdy">
</div>
</body>
Then in your file:
$('#rdy').ready(getInfo);
Just my added opinion, you should consider that Google is up to some not-so-nice things these days, they are long-gone from the "do no evil" mantra.
If we assume you have a JavaScript file that contains this content:
function getInfo() {
var place = "foo"
$(".one").html(place);
}
then your markup will look something like this:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="example.js"></script>
<script>
$(function(){
getInfo();
});
</script>
</head>
<body>
<p class="one"></p>
</body>
</html>
$(function(){ ... }); is just the simplified version of $(document).ready(function(){ ... });. They both more or less handle the onload event, which fires when page has finished loading.

Include external JS file and setting variable

I need to include an external JS-file with
<script src="/IframeHelper.js" type="text/javascript"></script>
But I need to set a variable and I tried somthing like this:
<script src="/IframeHelper.js" type="text/javascript">var $Vari = 'Para';</script>
And inside the "IFrameHelper.js" something like this:
var $Site = 'Rootfolder' + $Vari;
But you know...this doesn´t work. But how can I do this? It´s a little bit like calling a script with parameters. But such a parameter can be a JSON-String oder "long text".
As per my understanding you need to include IframeHelper.js file after you declare your variable.
<script type="text/javascript">var $Vari = 'Para';</script>
<script src="/IframeHelper.js" type="text/javascript"></script>

How to make an external javascript file knows its own host?

Is there any way that in an external javascript file, can know the host of the file?
For example, if I have the site http://hostOne.com/index.php, the code of the file index.php:
<html>
<head>
<script type="text/javascript" src="http://hostTwo.com/script/test.js"></script>
</head>
<body>
<div>...</div>
</body>
</html>
I need that in the file test.js can know the host http://hostTwo.com.
Thank you.
EDIT
or it can know the tag "script" which was called?, with this option I can analyzes the tag and get the "src" attribute. But I don't want to depend on the name of the file test.js and analyze all the tag script that contains the site.
*Solution based on the code of #Armi *
Html:
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script id="idscript" type="text/javascript" src="http://hostTwo.com/script/test.js"></script>
</head>
<body>
<div>...</div>
</body>
</html>
code in JS
var
url = $('head').find('#idscript').attr('src'),
host = url.replace(/(\/\/.*?\/).*/g, '$1');
console.log(host);
I've got an idea (the snippet based on jQuery):
var yourScriptTag = $('head').find('script[src$="jquery-1.7.1.js"]').eq(0);
var theHostnameOfYourScript = $(yourScriptTag).attr('src').replace(/(http:\/\/.*?\/).*/g, '$1');
alert(theHostnameOfYourScript);
jsfiddle example: http://alpha.jsfiddle.net/XsJn8/
If you know the filename of your script (and if this is always the same and unique) you can use this snippet to get the hostname.
If this path is relative (and contains no host) you can get the hostname with a simple location.hostname
Sorry, not possible. The content of the script is downloaded and after this it is fired. At this point the script "thinks" he is at your site.
Of course unless the host is hardcoded in the script.
This is not possible, because the JavaScript code is executed client-sided. You could propably parse it somehow out of your URL but, I don't think either that this is very useful and possible.
Inside test.js, you can use :
var url = document.URL;
then parse the url result.
You can't make cross-site scripting, so if you need more sophisticated stuff, you could write your javascript in php and call :
<script type="text/javascript" src="http://hostTwo.com/script/test.php"></script>
But that's not standard.
Anyway,, the solution is on the server, with a designed proxy.

Accesing variables declared in JAVASCRIPT in a different HTML FILE

I have two files screen.html and db_fun.js.I have declared a variable at just the beginning as follows:
db_fun.js
var name = "abc";
now i tried to access this variable in the screen.html file as follows
screen.html
<html>
<body>
<form name = "screen" action = "db_fun.js">
<p> <script>document.write(name);</script> </p>
</form>
</body>
<script src="db_fun.js" type="text/javascript" />
</html>
it doesn't print nethn. Y so?
add this to the head
<script type="text/javascript" src="db_fun.js"></script>
I think that you should move
<script src="db_fun.js" type="text/javascript" />
In the head of the page. I.e. before document.write.
Because in the moment where you are trying to print 'name', the variable is still not created. Also I think that it is not a very good practice to use document.write to add content to your page. Try using jQuery or some other library. For example:
$(document).ready(function() {
$("p").html(name);
});
That's because you are inserting your JavaScript in the page footer. You have to firstly load your javascript file into your web site (in the head section for example) and then use your variable.

Categories