I was looking at the page source for an ASP.NET page I wrote and noticed that my javascript was being rendered like this:
<script type="text/javascript">
// <![CDATA[
document.write('<script src="/_layouts/myProject/js/jquery.min.js?rev=sEo7zNI93reYIUNwemPM%2BQ%3D%3D"></' + 'script>');
// ]]>
</script>
Does anyone know :
Why there are commented out CDATA
tags around my script include? Do these even do anything?
Why it's using a document.write inside of the script tag to include... another script tag?
Because text nodes in XML that may contain HTML (but shouldn't be parsed as such) should be in CDATA blocks. Because the block definition is not valid JavaScript, it is commented out.
I'm not sure why. I don't think they are downloaded any differently (I imagine a JavaScript disabled browser won't ever download JavaScript files anyway).
Basically the commented CDATA tag is for browsers which doesn't support javascript and for the second one its inserting another javascript file to the page.
Related
I'm using ExtJs 4.2.2 and included all necessary js and css files, and my codes work just fine, ONLY IF I write my code into script tags within my html file. When I try to put these code into another file with .js extension and include it between head tags properly, it returns nothing. I'm sure I've included my js file properly because when I fill it with standard js codes, I get results. But with ExtJS syntax, the same code which return results within script tags, returns nothing. How? Do I miss something?
The following two are equivalent. If one works, the others work, too, regardless of what js code you use:
(Ex 1.)
<html><head>
<script>//your js code here</script>
</head><body>
</body></html>
and
(Ex 2.)
<html><head>
<script src="jscode.js"></script>
</head><body>
</body></html>
where jscode.js contains
// your js code here
Furthermore, the following two are equivalent:
(Ex 3.)
<html><head>
</head><body>
<script>//your js code here</script>
</body></html>
and
(Ex 4.)
<html><head>
</head><body>
<script src="jscode.js"></script>
</body></html>
NOTHING will change in behaviour.
I think (but you didnt post ANY code at all, so it's jsut guessing) that you had Example 3 working, but changed to Example 2. But only 3 and 4 are equivalent! And now you call that ExtJS fault!
You are executing code in an onLoad event or a Load event, perhaps like:
$(window).load(function() {
$('p').css('');
})
Remove this section and use only this in the javascript file and include it in a <Head> section:
$('p').css('');
When you are coding in html, then it execute steps one by one. But when we use a separate file then it executes it slower than HTML code.
I think I can use those technique mentioned on the top.
I am sure it will work.
I want to use JavaScript to write a full HTML document to an iframe. The following solution works nicely in most cases:
var iFrameDoc = iFrame.contentDocument || iFrame.contentWindow.document;
iFrameDoc.open();
iFrameDoc.write(htmlString);
iFrameDoc.close();
However, if the HTML document contains references to external scripts, and the browser is IE (using IE8 for testing, not sure about other versions), it fails. For example, a HTML document like this:
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<script>alert(variableFromExternalScript)</script>
</body>
</html>
In Firefox and Chrome the above works fine, but in IE8 it fails because the external script is not executed.
I found a workaround which looks like this:
iFrame.contentWindow.contents = htmlString;
iFrame.src = 'javascript:window["contents"]';
That seems to work in all major browsers. The external scripts are loaded as they should be. However, if the HTML document contains any special special characters (such as Chinese), the text ends up garbled in IE. Everything is UTF-8, it works well in other browsers, and IE is set to render the page in UTF-8, but the text in the iFrame is garbled.
So, I have one solution that displays text with the correct encoding, but doesn't load external scripts; and another solution which loads external scripts, but garbles the text. Any suggestions for a solution which solves both issues?
The HTML Document is dynamically loaded so I can't make changes to it such as removing the external scripts.
I came up with a workaround. I'm sure there's a better solution out there but for the time being this seems to work:
First I manipulate all the script tags in the HTML string so that they won't be executed. I replace the "src" attribute with "xsrc", and all inner text with an "xinnertext" attribute. Then I use iFrameDoc.write(htmlString) method to write the HTML string to the iFrame. The encoding is all correct, and no scripts are executed.
Then I use jQuery to go through all the scripts one by one. I manually recreate a script (iFrameDoc.createElement('script')) and append it to the DOM in the right place (next to the manipulated script tag).
I use load events to make sure that each script is loaded before the next one is executed.
Not optimal but it works in IE8.
Hi I'm experiencing some problems including a javascript file in my html project.
When I include it like this at the end right before the body tag my site does not work correctly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</body>
If, however i delete the tag at the end to make it look like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/>
</body>
everything works fine.
And if i include it within the head, it also works, independent of the syntax.
Why does it behave like this?
Do what everybody else has said, regarding the <script src="..."></script>
Use just src="//...", instead of src="https://..." or on non-encrypted pages (http vs https) your visitors will get security warnings for mixing the two protocols
If you have written jQuery code anywhere on the page, prior to actually including the file, you're going to get reference errors, where JS will not be able to find the function ($) you're trying to use.
There is a debugger available if you use Chrome, and press CTRL+SHIFT+J : it will take you to the developer-console, where I'm sure you're going to see all kinds of reference errors.
In Firefox, it would be CTRL+SHIFT+K, in IE it's F12.
This works under the same premise as writing in other languages where you try to use libraries or other classes, but don't actually import them until the bottom of your program.
For browser compatibility, you must use the first form:
<script src="https://..."></script>
with an explicit closing tag </script>. If this is the case where your code is not working, then your real problem lies elsewhere and not in the way you close the tag.
There might be some race condition happening for you... it will be good if you can provide complete code... if you attach that in header ... then your jquery is successfully loades and then executes your body part... if your attaching that in body ... then closure of script is give some issues... try to play while changing your script code placements in you body tag.
</script> closing is compulsory to work in cross browsers
This might help you in ur debugging.
Why do you want to load jquery in the end of your code? If you have some other scripts that need jquery, then they should be loaded after it. So either you put all script tags in head or in the end of body — jquery should be loaded before other files that depend on it.
I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.
I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
I tried using this but it did not work.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
Thanks
Q1 : I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
-Yes you can load javascript any where you want, if writing inline code then make sure you add script tag around your code.
-also you can request files like in body
Q2: Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
-- no problem in that, thats even better practice.
Q3 Requesting external file
to request external files you write below written fashion
<script src="http://file_name.js" type="text/javascript"></script>
It's not only possible (ref), it's frequently a good idea.
Putting your scripts as late in the page as possible, which frequently means just before the closing </body> tag, means the browser can parse and display your content before stopping to go download your JavaScript file(s) (if external) and fire up the JavaScript interpreter to run the script (inline or external).
Putting scripts "at the bottom" is a fairly standard recommendation for speeding up the apparent load time of your page.
Yes it is possible. Try and see.
For debugging, hardcode the jquery full path.
It is sometime recommended to load it at the end of the of the body, to make the main content of the page load faster.
Is it possible to load it in the section of the HTML.
Yes.
From the spec:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
SCRIPT is among the elements that may be a child of the BODY elements. Numerous other elements may also have SCRIPT children.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
When I run echo base_url() I get my the hostname of my server. This would result in a URL such as example.comjs/query-1.5.1.min.js. You probably should drop that PHP snippet entirely and just use: src="/js/jquery-1.5.1.min.js" which would resolve to http://example.com/s/query-1.5.1.min.js.
Yahoo engineers recommendation for higher performance is to include your scripts at the end of your HTML, just before </body> tag. Therefore, it's even better.
To see where the problem is, you gotta first make sure that your js file is loading. User Firebug and go to scripts tab. Do you see your script? If not, then something is wrong with your path.
it should work...
Did you try to view the generated source and see if the PHP code indeed generated the right path?
beside that, it is recommended to load jQuery from a CDN such as google's :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js