I'm using jQuery-templates for the first time, and I need my template to include some javascript, so it it run when the template is rendered.
I need at timestamp for the current time...
Writing
<script type="text/javascript"></script>
in a template, renders it to fail.
Is this simply not possible?
the following was blatantly copied from my answer to another question
When the HTML parser finds <script> it will start parsing the contents until it finds </script> which is present in:
document.write("<script src='links7.js?'+Math.random()+></script>
As such, you'll need to change the source so that it's not parsed as the end of a script element:
document.write("<script src='links7.js?'+Math.random()+></scri" + "pt>");
Ideally, you'd have HTML escaped all your inline JavaScript code, which would also mitigate this issue:
document.write("<script src='links7.js?'+Math.random()+></script&
For your particular case (which is different enough for me to not mark as a dupe), make sure that your content between your script tags is HTML escaped, or correctly placed between <![CDATA[ ]]> tags.
<script type="text/javascript"></script>
-or-
/* <![CDATA[ */
<script type="text/javascript"></script>
/* ]]> */
That all being said, you should be calling the necessary JS during the rendering process, and not injecting a script element into the DOM unnecessarily.
Related
I am defining the source of a .js file and attempting to call a function from that file in the same tag, as follows:
<script type="text/javascript" src="jsFunctionTest.js">
testMethodCall();
</script>
The .js file just contains:
function testMethodCall(){
window.alert("Hello there");
}
This doesn't work, I don't see the alert.
However, if I change the tag to two tags, as below, then it works:
<script type="text/javascript" src="jsFunctionTest.js"></script>
<script type="text/javascript">
testMethodCall();
</script>
This seems pretty messy. Is there any reason the first one doesn't work?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
You cannot register an external file and use the content in it, both at a time inside <script> tags. Only either one is allowed.
I'm fixing up a template we're using on one of our sites which has the following code
This snippet works.
<script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js"></script>
<script type="text/javascript">
GS_googleAddAdSenseService("ca-pub-123");
GS_googleEnableAllServices();
</script>
<script type="text/javascript">
GA_googleAddSlot("ca-pub-123", "Foo");
GA_googleAddSlot("ca-pub-123", "Bar");
</script>
<script type="text/javascript">
GA_googleFetchAds();
</script>
I've tried concatenating the static scripts like this
<script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js"></script>
<script type="text/javascript">
GS_googleAddAdSenseService("ca-pub-123");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-123", "Foo");
GA_googleAddSlot("ca-pub-123", "Bar");
GA_googleFetchAds();
</script>
However, now I'm getting an error
Uncaught ReferenceError: GA_googleAddSlot is not defined
I'm no noob when it comes to JavaScript stuff, but I can't imagine why combining the 3 inline scripts into a single <script> tag would make any difference here.
Any ideas?
google_service.js does not define GA_googleAdSlot, but it defines GS_googleEnableAllServices. When GS_googleEnableAllServices is called, it uses document.write to insert a new script element which loads a definition of GA_googleAdSlot. The new script element is inserted in the document after the end of the script element currently being executed. It's complicated, but it's your answer.
Check this out:
https://support.google.com/dfp_sb/answer/112649?hl=en
This is the piece of the document support:
DFP Small Business requires distinct blocks of JavaScript, described below. Do not combine JavaScript blocks, or your code may break.
They have clearly mentioned that you should not combine Javascript blocks!
I am not sure why, but as long as it is mentioned in the document, you have to follow the rules.
Given an external javascript file with autoexec function syntax:
// external-script.js
(function() {
console.log('external script called');
}());
With the following <script> tag, the external script doesn't execute:
<body>
// ...
<script src="external-script.js" type="text/javascript" />
</body>
But if I add an empty <script> block, as shown below, then the external script executes automatically.
<body>
// ...
<script src="external-script.js" type="text/javascript" />
<script>
// empty
</script>
</body>
Why does the addition of the empty <script> block trigger the autoexecute?
"self-closing" script tags using /> are not valid HTML syntax. Instead, you must always use <script></script>.
<script src="external-script.js" type="text/javascript"></script>
What is happening in your second example is that you are creating a single script tag with <script>//empty as its contents but this gets ignored since it will run the code from the src attribute.
In fact, HTML parsers just ignore all the / inside open-tags. Instead, some tags are always considered to be void elements with no contents (so <img> doesnt need a matching </img>.
For more info see Are (non-void) self-closing tags valid in HTML5?. Keep in mind that HTML5 is basically just a standard that documented the zany behavior that HTML parsers had already been doing all along.
Hello I have a JavaScript code and I want to use it in ASP file but my error code says:
Active Server Pages error 'ASP 0138'
Nested Script Block
/reklamsag.html, line 3
A script block cannot be placed inside another script block.
My code is:
<script src="http://ad.reklamport.com/scripts/rp.js" type="text/javascript"></script>
<script type="text/javascript">
document.write("<script src='http://ad.reklamport.com/rpgetad.ashx?tt=t_canvecan_anasayfa_300x250&ciid=&rnd="+Math.random()%99999999+"'></"+"script>");
</script>
Someone says use code in external file and include it asp file i use this include code but it didn't work:
<!--#include file="reklamsag.html"-->
There is a technique to split the word "<script" into two parts such as "<scr" and "ipt" .
document.write("<scr"+"ipt src....></scr"+"ipt>");
Your code can go like this:
<script src="http://ad.reklamport.com/scripts/rp.js" type="text/javascript"></script>
<script type="text/javascript">
document.write("<scr"+"ipt src='http://ad.reklamport.com/rpgetad.ashx?tt=t_canvecan_anasayfa_300x250&ciid=&rnd="+Math.random()%99999999+"'></"+"scr"+"ipt>");
</script>
That's an incorrect way to load external JavaScript.
I understand the reasoning behind this is to prevent caching, since you already have server side language at your disposal, just have this and it will have the desired effect:
<script type="text/javascript" src="http://ad.reklamport.com/rpgetad.ashx?tt=t_canvecan_anasayfa_300x250&ciid=&rnd=<%=CLng(Timer())%>"></script>
This will append the amount of seconds since 12 AM, which is pretty much the same as random number. If you want extra layer or "uniqueness" you can add year, month and day.
I'm working on a plugin that allows to inject 3rd party code into a page (either as iframe or directly into the DOM).
My problem is "direct injections", because I need to make sure, I don't add any <scripts> additional times, if they are needed in my main page and in a page I'm loading and injecting.
For example (and I can't use requireJS), my page.html looks like this:
<html>
<head>
<script type="text/js" src="jquery.js"></script> // exports window.$
<script type="text/js" src="foo.js"></script> // exports window.foo
</head>
<body>
<!-- things that make foo load anotherPage.html and append its content here -->
</body>
</html>
with anotherPage.html
<html>
<head>
<script type="text/js" src="foo.js"></script> // exports window.foo
</head>
<body>
<!-- stuff that also runs on FOO -->
</body>
</html>
Page loading is done via Ajax and when I'm processing the data returned by my request for anotherPage.html I end up with a list of all elements after doing this:
cleanedString = ajaxResponseData
.replace(priv.removeJSComments, "")
.replace(priv.removeHTMLComments,"")
.replace(priv.removeLineBreaks, "")
.replace(priv.removeWhiteSpace, " ")
.replace(priv.removeWhiteSpaceBetweenElements, "><");
// this will return a list with head and body elements
// e.g. [meta, title, link, p, div, script.foo]
content = $.parseHTML(cleanedString, true);
// insert into DOM
someTarget.append(content);
This is where I'm stuck trying to detect whether a script I'm about to append to the document is already there.
I cannot go by the src, because the filename may differ and a script may be hosted on a different domain (with Access-Control-Allow-Origin correctly set). I also don't know, what and if the script I'm about to append returns a global I already have defined and I can't/don't want to use eval() to find out.
Question:
Is there any way to identify whether a plugin or script that may return a global is already "on" a page, when I only have the "non-appended" <script> element available?
Thanks!
here is an example of my self-enclosed module pattern, i call it a "Sentinel":
(function wait(){
if(!self.$){
if(!wait.waitingJQ){
wait.waitingJQ=true;
addScriptTag(JQUERY_URL);
}
return setTimeout(wait, 44);
}
doStuffThatNeedsJquery();
}());
The sentinel pattern work from anywhere (internal or external), doesn't care about script loading order, and works with ANY script loading library. you can list additional depends below the jQuery fork in the same manner, just put your greedy code at the bottom of the sentinel wrapper function.