Can't get document.write to work with ajax - javascript

I have a script that uses document.write that needs to work within ajax, but I am having trouble finding a solution to make it work. here is the script that is loaded into the page via ajax.
<script type="text/javascript">
example_widget_id = "example-1234";
example_widget_name = "registration";
example_widget_type = "example";
document.write(unescape("%3Cscript src='https://widgets.example.com/javascripts/example_widget.js' type='text/javascript'%3E%3C/script%3E"));
</script>
What happens is that the page goes blank...which is normal for document.write and ajax. I am trying to find a way to add it via innerHTML (or another solution) but I have had no luck. I looked at this thread JavaScript Document.Write Replaces All Body Content When Using AJAX
but I can't seem to figure out how to make that work with what I have.
Thanks for any help you can provide.
UPDATE:
The script snippet is third party widget. It is used by inserting it into a frontend web page editor that allows the user to position the content on the page anywhere they want (via ajax). Once it is positioned it can also be styled with the frontend editor. When the page is how the users wants it, they can save the layout and the front end editor is disable (turned off) until needed. When this happens the script (document.write) will then load and work fine on the page as it should without the interference of the ajax based frontend editor.
I was thinking if there was a way to cache the html results of the document.write (html portion) and then that cached version could be loaded via the frontend editor. Then I can swap out the html cached version of the widget with the original script w/document.write once the front end editor becomes disabled or turn off. I played around with the logic and I am able to swap out what loads depending on the state of the front end editor. I guess my question is can a document.write content be cached or saved? I think I can handle the logic in how it is used after that.

There is no solution. document.write() replaces the document after the onload event have fired. It cannot be done.
You cannot make it to work*.
*note: Technically, you can make it to work if you write your own web browser because you then would be able to make your browser NOT behave like all other browsers and append instead of replace on document.write(). But you cannot make it to work with Chrome or IE or Firefox or Opera.
For a quick solution, use .innerHTML instead. For a better solution, learn the DOM manipulation API (or use a DOM library).

Related

jQuery loses ability to read HTML and CSS tags inside AJAX script after location hash change

I'm experiencing some issues regarding an AJAX script I'm working on.
The page loads perfectly well, and all needed scripts are loaded the same for basic page functionality inside AJAX script, but after hash change, jQuery behaves awkwardly.
Let's take this example.
The custom jQuery script writes an inline CSS propriety for a specific DIV at page loading:
Now, I load the login page for example:
I get back to the main page and inline style disappears as well as the basic loaded functionalities cease to exist after Ajax call:
*
Any experience on this? Does anyone have a clue why this happens? Or even near it... Seems the script unloads on page/hash change, which I don't believe. Or enters in double loop, therefore doubling the classes for HTML. I don't get it.
Already searched a lot and went trough the coding and is fine becasue it works fine alongside with basic HTML. Would appreciate some thoughts on this matter.
Thanks!

Load pages via AJAX and execute javascript and CSS

I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.

How to stop page load in html static page

Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...
You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');
If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')
window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.
Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.
What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html
put window.Stop() wherever you want to stop the page from getting renderred
You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);
HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.
Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements
If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method
The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');

Script tags contained in jQuery AJAX response not evaluated when inserted into the DOM?

According to the jQuery documentation for $.ajax, "included script tags are evaluated when inserted in the DOM.". When I use ajax to grab the content of a dialog box, which in turn contains a script tag for displaying a ReCaptcha box, the ReCaptcha box does not appear when added to the DOM. According to FireBug, the script tag is also now missing from the added content. Navigation directly to the dialog content displays the ReCaptcha just fine.
Does anyone know why this may be occuring and/or know a work around? Any help would be greatly appreciated.
Code in action can be viewed here:
https://dustinhendricks.com/
Then click "Register Now".
Does the script try to do things like document.write()? That won't work when loaded dynamically, only on the initial page load.
In general, scripts contained in HTML that is innerHTML'd is not evaluated consistently across browsers. To fix that, jQuery actually looks for script tags and executes them manually.
But that doesn't really matter. Even if jQuery didn't do that, the script would be running in a different type of context than it normally is when a page is loading for the first time. It's not really an 'inline script' anymore, and a lot of 3rd party scripts were written with it being 'inline' as an assumption. You'll have to figure out what the script is doing and find a way to call it with dynamic content.
Take a look at the Google reCAPTCHA AJAX API. Using the CAPTCHA this way should fix your problem.
I hope it helps!

Changing the content type of an iframe to xml to display xml and manipulate it through DOM

I would like to use JavaScript to do the following:
Build an XML file
display it in an iframe
manipulate the content through DOM
I'm building an XML editor and am having trouble displaying the xml in an iFrame.
this is the code that I'm using at the moment.
function previewContent(what){//changes the content of an iFrame
var tsite = document.getElementById('xmlinside').contentDocument;
tsite.open();
tsite.contentType('text/xml');
tsite.writeln(what);
tsite.close();
}
function makeXML(){
var tester = '<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\
<bookstore>test</bookstore>';
previewContent(tester);
}
without the tsite.contentType('text/xml') the iframe simply displays test.
when I check the source it's still in HTML with the added line <bookstore>test</bookstore> added and the xml version as a comment.
I would like it to display like a browser without a stylesheet. I know Safari displays it as a raw xml file if there is no formatting associated with it. This would be perfect. Is it the content type that is messing up? That's why I tried changing it but this is the wrong code. Any help would be great!
A few things to keep in mind...
1.) If it's content loaded via AJAX you will need to use the application/xml media type/mime and the first element has to have a namespace...
<div id="root_most_ajax_element" xmlns="http://www.w3.org/1999/xhtml">
<p>ajax content</p>
</div>
2.) Never use innerHTML (and frameworks as they rely heavily on innerHTML) and most especially never use it in conjunction with loading AJAX loaded content, the proprietary Microsoft method does not correctly register the DOM so you sort of see that the code is there but it's not really there thus making your code wholly unreliable at that point. If using JavaScript use the importNode method to load AJAX loaded content (instead of using an iframe, you can import it to a division element instead).
3.) You won't (and shouldn't) be able to access (X)HTML of an iframe if it's not loaded from the same domain so if it's being loaded from a third party website forget about it otherwise you could say manipulate the text and discover their information (phone, email, etc if they're signed in to something).
If you meet those three conditions you should be able to work with code as if there were no iframes or AJAX involved to begin with.

Categories

Resources