Replacing a document body on the iPhone - javascript

I need to be able to replace the entire document content with a response obtained from an ajax request.
I have tried assigning to document.body.innerHTML and also tried using document.write().
While both of these are functional on desktop Safari, I need a solution for the iPhone/iPod Touch. Attempting to modify document.body.innerHTML produces exception 7 and the document.write() function is undefined on mobile safari.
I am essentially displaying an activity indicator while waiting for a form post to complete. I do not want safari to begin rendering the response until it completes in it's entirety as it could take some time to complete.

I just tested on my 3G iphone and it worked fine by setting document.body.innerHTML. I did use jQuery in my test to make sure the body was loaded before running the js:
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.body.innerHTML = 'it worked';
});
</script>
</head>
<body>
This is a test
</body>
</html>

Related

Infinite loading with script tag inside iframe

Here is code, stuck with that simple issue which I never have had in past 7 years:
<html>
<body>
<iframe></iframe>
<script>
window.frames[0].document.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
</script>
</body>
</html>
The problem is that browser's spin wheel continue to circle.
Network console shows all loaded.
If I remove iframe from DOM, or add/change #src attribute - loading stops.
I believe the first answer is the better way, but I'll provide a second answer that is almost identical to your code, but shows how calling document.close() would have also solved your issue.
The issue is that you've started writing to the document's <head> element in the iFrame, but not finished (that's why the page keeps loading). Calling document.close() signals that you've finished writing to the document.
<html>
<body>
<iframe></iframe>
<script>
var doc = window.frames[0].document
doc.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
doc.close();
</script>
</body>
</html>
Actually, I've just found solution that works if you have control on inner script (doesn't help with loading 3rd party like jQ though).
You should close "current stream" with document.close().
Looks like firefox might have some weirdness around iframes
<html>
<body>
<iframe></iframe>
<script>setTimeout(function(){window.frames[0].document.write("hi");}, 5000);</script>
</body>
</html>
This results in a spinner that starts 5 seconds after page load and doesn't go away (at least on my computer - firefox 47.0)
Try just:
window.frames[0].document.write('<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/script>');
I checked on JSbin and it works ok.
Example page
Update:
I think it cannot work because that iframe doesn't even have any document in it. it's just an empty tag until it has a working src and is populated.
See demo
Anyway, this can only work if the content of the iframe is on the same domain (google "cross-origin iframes"). There is a "race" going on here. you want to load jQuery so the page your are loading would use it, but you cannot load any script from the outside of the iframe to the inside until the page has loaded inside the iframe...
I was able to insert the script without the loading issue you describe by defining and appending the element in Javascript, without any loading issues.
<html>
<body>
<iframe id="myFrame"></iframe>
<script>
var jq = document.createElement('script')
jq.type = 'text/javascript'
jq.src = '//code.jquery.com/jquery-3.0.0.min.js'
document.getElementById('myFrame').contentDocument.getElementsByTagName('body')[0].appendChild(jq);
</script>
</body>
</html>
Of course, changing body to head will change where the script loads in the iFrame.
May use the onload
function populateIFrame() {
const str = `<body></body>`;
const idoc = document.getElementById("demo01")
idoc.contentDocument.write(str)
idoc.close();
}
window.onload=populateIFrame

jcors-loader.js not working in IE7

Index.html
<html>
<head>
<script type="text/javascript" src="/js/jcors-loader.js"></script>
<script>
JcorsLoader.load(
"js/jquery-1.8.0.js",
"/js/alertme.js",
function() {
$("#result").text("TEST OK");
}
);
</script>
</head>
<body>
<h1 id="result"></h1>
</body>
</html>
alertme.js
alert("Loaded");
This works fine in chrome and firefox it displays "TEST OK" and popup...But no message or alert in IE(7,8,9)...Any help will be appreciated.
I wrote that library, remember these three tips to use it.
Not invoke a script add the inline content.
Put the script tag after the .
IE7 works but blocks onload.
First thing to check is that you're not using console.log anywhere in your javascript as this can cause funny issues with IE.
The next thing to do is check the documentation on the library you're using as it may not be compatible with IE 9 and below (have you tried it with IE 10?)

IE does not read <script> tag, but after refresh works fine

I have a weird bug that is present only in IE (7/8/9/9CV).
FF and Chrome do not have this issue.
I have a pretty big, complex page. In the bottom of the page I have two pieces of JavaScript code right one after another. The first one has no problems, but the second one for some reason is being displayed as a text when I load the page first time. If I just refresh the page without doing anything else - everything works and looks just fine.
Two pieces of JS being generated on a server from two different pagelets so I cannot put them together into one script tag. The first piece of JavaScript code is nothing more but a call to the same function couple of times with different parameters, and the second script is just a declaration of a JSON like object that is being consumed by another function that is defined earlier on the page.
So the page code looks something like this:
<!DOCTYPE html>
<html>
<head>
...
<title>...</title>
</head>
<body>
...
<script type="text/javascript">
//Some javascript that executes perfectly fine every time and is nothing more but just couple of calls to some function
someFunction("param1");
someFunction("param2");
someFunction("param3");
</script>
<script type="text/javascript">
var myObject = {"success":[{"header":"Form successfully submitted","messages":["Some message 1"]}]};
</script>
</body>
</html>
So when a form submitting happens I take this object and use it to display a message on the page. But instead, when user submits the form and it opens the page for the first time, I see this in the bottom of the page:
var myObject= {"success":[{"header":"Form successfully submitted","messages":["Some message 1"]}]};
But when I refresh the page - I do not see that code, but instead I see the message being displayed with values from this object.
When I open the "developer tools" and navigate to the HTML tab, I see that my tag for the second JS piece is shown as commented out!
<!-- sctipt ... -->
But if I refresh the page - it works fine, and in HTML tab of the developer tools it actually shown as a script node that I can expand and see the Javascript code.
Does anyone know what is going on here?!?! This issue has been bugging me for couple of days now!
You should replace
<script type="text/javascipt">
with
<script type="text/javascript">
EDIT :
HTML isn't XHTML. Don't wrap your scripts inside CDATA. Your script elements should be simply like this :
<script type="text/javascript">
var t0_date = new Date();
...
</script>
Change both these:
<script type="text/javascipt">
to:
<script type="text/javascript">
Well, I found an answer to this problem. Well, more of a work around I guess, as this is not something I expected but it works.
Basically, if you put anything between the two script elements - IE wokrs fine!
So what I did was - I put br tag in between and it now works fine. I have no idea why. Perhaps some weird bug in IE rendering engine.
The end result looks like this:
<script type="text/javascript">
//Some javascript that executes perfectly fine every time and is nothing more but just couple of calls to some function
someFunction("param1");
someFunction("param2");
someFunction("param3");
</script>
<br>
<script type="text/javascript">
var myObject = {"success":[{"header":"Form successfully submitted","messages":["Some message 1"]}]};
</script>

Constructing HTML after getJSON works in Safari but not in Chrome or Firefox

Hi i'm actually a newbie using javascript and html/css.
I can't understand why my script works on safari, but not on chrome and firefox...
any ideas?
EDIT: Both in chrome anda firefox the ul and li elements do not show... Also the previous alerts don't work. I'll check errors in the console and edit the post again
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="patients" style="text-align:center">
</div>
<script type="text/javascript">
$.getJSON("http://www.url.com/json",
function(data) {
var items = [];
alert(data[1].patient);
alert(data[1].hr);
$.each(data, function(index, val) {
items.push('<li id="' + index + '">' + val.patient + '<div style="display: none" id="'+val.patient+'"></div></li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#patients');
});
</script>
</body>
</html>
The first thing you have to understand is when javascript executes on the page.
So in the code you have posted, the browser first loads the jquery library. When it encounters your <script> tag, it then attempts to execute the $.getJSON() function.
In your script, on the successful completion of the json request, its attempting to modify the DOM by adding generated html to #patients. This won't work 100% of the time because you can't guarantee the browser has rendered #patients yet.
You should start by wrapping your javascript code inside a wrapper that only executes after page load.
This can be done in a few ways. These are the jQuery specific methods here, since that's what you're using.
$(document).ready(function(){
//your code
});
Or:
$(function(){
//your code
});
The native javascript code would look something like:
document.addEventListener('load', function(){
//your code
}, false);
I would recommend using one of the jQuery methods.
As an added tip, you don't need to put type="text/javascript" in your script tag. All browsers understand that a script tag means javascript. Luckily we are well past the old days of various broken versions of Internet Explorer.

How do you use JQuery to load HTML fragment from another file?

I tried using the method described at w3 schools but it seems to only work in FireFox
http://www.w3schools.com/jquery/jquery_ajax.asp
I used the example provided on the Try It
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").load('test1.txt');
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
</body>
</html>
I just set it to run onload instead on after clicking. It did work there but when I make my own page it only works in FireFox.
Edit: Chrome just has security to prevent local file access it works on a server.
If anyone knows how this would work in older IE versions it would be a help
Your example works in the Chrome 18.
You can try this way:
$(document).ready(function(){
$.get('test1.txt', function(response) {
$('div').html(response);
})
});
I recommend to take a look at jQuery AJAX function. It can use cache and it's better then using the "sub-alias" $.get.

Categories

Resources