I'm using JQuery to append a script tag to a div, ex.:
$("#special_div").append("<script src="http://blablabla.com/id.php?id=0000"></script>");
and that script returns:
document.write("<object ....></object>");
but when I append it, all my HTML is gone and only that tag is written..
Can anyone tell me what's wrong?
Escape your quotes first of all:
$("#special_div")
.append("<script src=\"http://blablabla.com/id.php?id=0000\"></script>");
Additionally document.write is fine depending on when it is called.
Edit: removed other text, other answerer about document.write enlightened me on this :D Thanks #Ivo
Here is the explanation:
Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page
What's wrong is that you're using document.write() — or at least the author of that script is using it. That's what document.write() does when it's called after the actual original document has been built by the browser. I suppose your code is in some jQuery initialization block:
$(function() {
// your code somewhere in here ...
});
Thus it runs only when the browser has gotten the page all ready. But at that point, a new call to document.write() will be interpreted as meaning that you want to completely replace the current page with new stuff.
One thing to try would be to put an <iframe> in the document (not with document.write()!!) and then put the <script> tag inside that.
The script that you load uses document.write, but you're loading the script after the page has already been loaded completely, therefore document.write will overwrite the contents of the page.
For more reasons against the use of document.write see:
Why is document.write considered a "bad practice"?
To fix it, you need to include the script in the HTML source itself.
don't use document.write but appendChild to append the obejct tag
Related
I am including some related content on misc. web pages by adding a <script> tag near the end of the <body> tag, which then loads other javascript files. The flow is a little convoluted, so I’ll try to explain it before asking my question:
A browser loads a page with our <script> element near the end of the <body> element
The src attribute of the script tag points to a javascript file which (in some cases) injects a second <script> element
The src attribute of the injected <script> element points to yet another javascript file, which finally injects some content on the appropriate part of the page.
We are using this two-stage approach to be able to do some basic processing before deciding whether to include the final content, which could take some time to load.
The problem is that IE8 (and maybe older versions) loads the last javascript twice. It appears that the act of setting the src attribute will trigger a load, but so will appending the script tag to the DOM. Is there any way to avoid this?
I have created a bare-bones demo of the problem. If you have some way of tracing the HTTP requests, you will see that IE8 loads js_test2.js twice.
The root difference is that IE executes a script element the first time it is added to a parent element's childNodes, regardless of whether the parent element is actually in the document. Other browsers only execute script when it is added to a node inside the document's tree of childNodes.
jQuery's domManip function (line 524 of jQuery 1.3.2), which is called by append and other similar jQuery methods, tries to be clever and calls evalScript for any <script> elements it finds in the final parsed HTML, to execute the script (by doing AJAX requests if necessary for external scripts). (The actual script elements have been removed from the parsed childNodes to stop them getting executed on insertion into the document, presumably so that scripts are only executed once when content containing them is appended into multiple elements at once.)
However, because the previous clean function, whilst parsing the HTML, appended the script element to a wrapper div, IE will have already executed the script. So you get two executions.
The best thing to do is avoid using domManip functions like append with HTML strings when you're doing anything with scripts.
In fact, forget putting your content in a serialised HTML string and getting jQuery to parse it; just do it the much more reliable plain DOM way:
var s= document.createElement('script');
s.type= 'text/javascript';
s.charset= 'UTF-8';
s.src= 'js_test2.js';
document.getElementById('some_container').appendChild(s);
(To be honest, after viewing the stomach-churning source code of the clean function, I'm having serious doubts about using jQuery's HTML-string-based DOM manipulations for anything at all. It's supposed to fix up browser bugs, but the dumb-regex processing seems to me likely to cause as many problems as it solves.)
Incidentally with this initial call:
document.write(unescape("%3Cscript src='js_test1.js' type='text/javascript'%3E%3C/script%3E"));
You don't need to unescape here; I don't know why so many people do. The sequence </ needs to be avoided in an inline script as it would end the <script> tag, and if you're doing XHTML < and & should be avoided too (or ]]> if you're using a CDATA wrapper), but there's an easier way of doing all that with just JavaScript string literals:
document.write('\x3Cscript src="js_test1.js" type="text/javascript">\x3C/script>"));
I've seen that behavior happening on other versions of IE under similar circumstances (such as cloning of <script> nodes) and I never got to know how to stop the script from executing twice, so what I ended up doing was adding a guard on the script code for it not to run twice. It was something like:
if (typeof(loaded) == 'undefined') {
// the whole code goes in here
var loaded = true;
}
If you can't find a way of preventing the script to execute twice, you may want to try that approach instead.
It would seem that jquery is fetching the second instance of js_test2 using XmlHttpRequest.
Why I don't know but its the behaviour of JQuery you need to investigate.
You can check to see if a script is already in the document before loading it-
function fetchscript(url, callback){
var S= document.getElementsByTagName('script'), L= S.length;
while(L){
if(S[--L].src== url) return true;
}
//create and append script and any callbacks
}
I find the same problem，only happen in IE.
jQuery‘s html() method chains is: html>append>domManip>clean
clean() method use innerHTML make string to DOM, innerHTML in IE has a bug that script tag will immediately load(first load), jQuery evalScript script tags at the end of domManip method(ajax load).then script file load twice in IE.
I think jQuery should fix this problem,update the clean() method
It's possible that this is because you use document.write when you're already in a <script> element. Have you tried appending to <head> instead of document.write?
I dont know this may be duplicate but,
I use ajax in my website, now in response to that call i send some html and script.
Then I replace that data with some of my element exist in page.
Now, I want to make second ajax call so I have removed html content from loaded div. Then again ajax call return some other html code and script. But Some times it is conflict between previous script and newly arrived script.
EX.
1st response I replace html and script with some element: $('.ma_right_main').html(response.data);
then before 2nd call I remove content:
$('.ma_right_main').html('');
2nd response I replace html and script with some element: $('.ma_right_main').html(response.data);
but after replace it 2nd time script returned from first time still there in execution. I want to remove it just like how I can remove html content.
I don't think once a browser has loaded a script that it can be removed (this doesn't mean you can't remove it from the dom, but it would still exist.) For example if you had a script with variable x, load the page so the script gets loaded, remove the script from the dom, x I think would still be defined.
There are ways around this though, if each dynamically loaded script was its own object, when "unloading" you could set the object to null. This is a solution I came across a while back when looking for a similar solution.
Found the reference I was referring to: https://stackoverflow.com/a/1346903/1475461
The scripts aren't naturally executed at all. (Setting .innerHTML will not execute scripts inside the HTML).
jQuery manually finds all the script elements in the html, removes them and evaluates them. So if you are using .html and don't want the scripts to execute, do not include scripts in the html.
And you cannot deactivate scripts, so you need to refactor your website with this in mind. Don't include new code in responses if they can conflict with previous ones. Use generic code that is always loaded.
I know that jQuery automatically parses script elements and append them to the head, however I dont have much of a choice. I need to insert an html string exactly into a specified div. so for example <script src='http://.....'></script> into <div id="lb"></div>.
The problem is that the scripts get loaded from a server which I have no control over and is using a document.write() script. So if that gets appended to the header, there will be severe issues. How can I do this with or without jQuery?
Ok. So to rephrase your question:
You want to insert some < script > tags in your page. These tags load javascript files that have document.write() in them.
Now you want the document.write() to happen in some divs, and not in the header.
I think you would then need to render those script tags directly in the source of your page from the very start. Felix noted correctly that when you load thse script tags later, the whole page will be replaced by what is outputted by the document.write() function.
Thus, javascript or JQuery cannot load these script tags. You should render them serverside in the initial version of your page..!
If you don't want your script to alter the content of you page you could insert it in an iframe instead of a div ? document should refer to the iframe then. I don't exactly get what you want though.
Document.write() will put the script at the end of the document (afaik). Then, you would need to look-up these script-tags and put them into the proper DIVs (with a $(elm).append(scriptObj)).
But I might not understand what your problem is...
When I write the following code directly into my html page under a script tag, the string "test" gets appended to my page without replacing the rest of its content (1):
document.write("test");
However, if I place that same code into a separate javascript file like (2):
<script src="http://127.0.0.1/whatever.js" type="text/javascript"></script>
Suddenly that same code rewrites my entire page.
Is there a way to perform a document.write() from a remote file and get the result in (1)?
Thanks for your time.
If you use doc.write while the page page is rendering, it will insert or append the string. If you use doc.write after it's rendered, or after window.onload, it will essentially begin the rendering process again, and overwrite the page.
It's my guess that you are getting asynchronous behavior when loading the script, and it's not executing until after onload. I can't recreate your problem.
You may be including your script at the top of the page. Where it gets the document.write() stuff and thus writes the text instead of a append behaviour.
The safer solution is to append a document element to the page - that should always work
Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'