Cross browser problematics

Moskog · 2015-04-06 01:28

Hi again!
I recently discovered my personal weather page won't work on all browsers. When using iphones and ipads the numbers (variables) won't be visible. Could anyone help me check out if the code is missing some important things here, especially for android. The url for the page is here: http://la3usa.com/moskog.htm
The html code for the page:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Data fra Moskogen</title>
<style>
header {
background-color:blue;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:50px;
background-color:#eeeeee;
height:410px;
width:645px;
float:left;
padding:5px;
}
section {
width:500px;
float:left;
padding:10px;
}
footer {
background-color:blue;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>

<body>

<header>
<h1>V

Heater. · 2015-04-06 02:34

Moskog,

I don't see any numbers on my Linux desktop either. I suspect it only works in IE.

When I visit the page at http://la3usa.com/moskog.htm I get the error:

XMLHttpRequest cannot load http://la3usa.com:5000/moskog. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://la3usa.com' is therefore not allowed access.moskog.js:10 (anonymous function)

Firefox says this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://la3usa.com:5000/moskog. This can be fixed by moving the resource to the same domain or enabling CORS. moskog

That is your xmlhttp.send(); failing.

The problem is that your XML data is coming from a different site than your web page. It comes from http://la3usa.com:5000 http://la3usa.com

So you can either:

1) Make sure your web page and XML come from the same origin.

2) Add the Access-Control-Allow-Origin header to the http served up by your web page server.

Access-Control-Allow-Origin: http://la3usa.com:5000

What are you using for these servers?

I like to put nginx up as my web server and have it forward requests to Apache or other server processes on different ports. That keeps everything on the same origin.

Heater. · 2015-04-06 02:52

By the way. You will have a much easier time of it you use JSON formatted data rather than XML. Nobody uses XML unless they really have to.

 var getJSON = function(url, successHandler, errorHandler) {
  var xhr = new XMLHttpRequest();
  xhr.open('get', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status == 200) {
      successHandler && successHandler(xhr.response);
    } else {
      errorHandler && errorHandler(status);
    }
  };
  xhr.send();
};

getJSON('http://la3usa.com:/moskog', function(data) {

    document.getElementById("Temp1").innerHTML    = data.Temp1;
    document.getElementById("Humid10").innerHTML = data.Humid1;

....and so on...

}, function(status) {
  alert('Something went wrong.');
});

Note the xhr.responseType = 'json' in there.

Your JSON data file would look like:

{ "Precip1": 0, "Precip10": 1, "PrecipY1": 6, "PrecipY10": 0, "Humid1": 38, "Humid10": 0 }

Much nicer.

Moskog · 2015-04-06 04:19

OK, json example looks nicer, you are right.
I didn't know XML was kind of outdated.

So when you [Heater] recommend JSON intead of XML, does it mean JSON is not affected by the cross domain policy the same way as XML?

More background info on my servers: The la3usa.com:5000 is my Spinneret, port 5000 through www.dyndns.org.
la3usa.com is my PINK (port 80) also through www.dyndns.org.

The XML file is generated by the Spinneret, and the HTML and JS file is located on the PINK. When IE allowed XML-data transmitted from la3usa:5000 to la3usa, I thought the browser accepted those two url's to be part of same origin. Because things seemed to be OK. Well, I see now it doesn't seem to be that simple, other browsers then IE still won't accept this setup.

OK, so now I understand you recommend that I change the .htm file, remove the XML-stuff and put in JSON instead.
Then I change the Spinneret's spin-code to something similar with your JSON-code at the bottom.

This sounds very interesting I will give it a try. Thanks for very quick responce!

Heater. · 2015-04-06 05:10

Moskog,

No, changing to JSON will not help with this cross origin problem.

I know nothing of Spinnerets or PINKs but is it possible to serve up the HTML page from the same machine on port 80 that serves up the XML/JSON?

I think that should fix it.

However I think there is a way to make this work with your current set up.

The trick is that this cross-origin restriction forbids loading of data via XMLHTTPRequest from "foreign" urls but it is quite possible to download JavaScript from anywhere. (Why that is I have no idea, it's insane).

So here is what you can do. Instead of creating an XML or JSON file you crate an actual JavaScript file that wraps your data in actual code. Maybe myData.js like so:

sensorData ({ Precip1:   0,
             Precip10:  1,
             PrecipY1:  6,
             PrecipY10: 0,
             Humid1:   38,
             Humid10:   0}
          );

Now in your HTML you put some JavaScript that defines the sensorData function:

function sensorData (data) {
	document.getElementById("Temp1").innerHTML   = data.Temp1;
    document.getElementById("Humid10").innerHTML = data.Humid1;
    //....and so on...
}

then add a script tag to fetch that little script file from the "foreign" url:

<script src="http://la3usa.com:5000/myData.js"></script>

Importantly put this at the bottom of the HTML so that it runs last.

See what happens here: The HTML loads, defines the function "sensorData", then it loads and runs the myData.js which calls "sensorData" which fills in your HTML values. Cunning ha!

Any way I have never tried this but I have read that it works. The technique is called JSONP or JSON-P if you want to google it.

It would be great if you could let us now how that goes for you.

Moskog · 2015-04-06 06:49

Heater, I would think your idea on building the complete wrapped js-file on the Spinneret most be the best solution here. Learning the JSON faces the same cross origin problems as XML, I feel I go no steps forward that way.
But I do think I could use JSON in other projects, it sure looks smarter then XML.

If this works the way I want then I hope to place the main HTM-files on remote servers, instead of placing them on the PINK or Spinneret. Just to save space and memory on the both of them.
I'm going to take a closer look at JSONP.

-Sure I will let you know about the progress!!

Moskog · 2015-04-06 09:18

OK, an update of the project here, I think we have solved the problem now!

I do have a test page here: http://la3usa.com/moskog2.htm its a limited version of the original page.

The html code:

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Data fra Moskogen</title>

<script>
function sensorData (data) {
document.getElementById("Humid1").innerHTML = data.Humid1;
document.getElementById("Humid10").innerHTML = data.Humid10;
document.getElementById("Precip1").innerHTML = data.Precip1;
document.getElementById("Precip10").innerHTML = data.Precip10;
document.getElementById("PrecipY1").innerHTML = data.PrecipY1;
document.getElementById("PrecipY10").innerHTML = data.PrecipY10;
}
</script>

<style>
header {
background-color:blue;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:50px;
background-color:#eeeeee;
height:410px;
width:645px;
float:left;
padding:5px;
}
section {
width:500px;
float:left;
padding:10px;
}
footer {
background-color:blue;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>

<body>

<header>
<h1>V

Don M · 2015-04-06 09:26

Works fine on Google Chromebook (WiFi) , Nexus 7 Android tablet (WiFi) and Samsung GS5 (cellular connection).

Edit: Also works fine with Apple IPod Touch (WiFi).

Moskog · 2015-04-06 10:36

Don M wrote: »

Works fine on Google Chromebook (WiFi) , Nexus 7 Android tablet (WiFi) and Samsung GS5 (cellular connection).

Edit: Also works fine with Apple IPod Touch (WiFi).

Thanks, that's good!

I discovered a minor problem with one of the variables, somewhere between the precip sensor and the main station. If there are problems with getting the numbers, that's the reason.

Heater. · 2015-04-06 14:00

Moskog,

It's been a long day and I'm a bit to tired to see exactly what you have done there.

However it does now work for me with Chrome and Firefox. Well done.

We have both learned something today.

You have a very beautiful house by the way.

Moskog · 2015-04-12 09:12

Hi again, I'm working on this script project but I ran into a trouble I can't seem to find a way out of.

It started with the fact that my script file was not able to read text out of my js-file. Only numbers.

So I decided to make a short and simple js-file with numbers only for both tempsign and value, just for testing:

sensorTemp ({Temp1:19, 
Temp10:1, 
Tempsign:0});

The output should be +19,1 C when Tempsign:0 means + and Tempsign:1 should mean -.

I made a function I hoped should work but nothing comes out on a HTML-line like this:

<p><b>Temperature: <span id="Tempsign"></span><span id="Temp1"></span>.<span id="Temp10"></span> C

<script>
 
function sensorTemp (data) {
    var b = document.getElementById.innerHTML   = data.Tempsign;
    document.getElementById("Temp1").innerHTML   = data.Temp1;
    document.getElementById("Temp10").innerHTML   = data.Temp10; 
    var text;
    if b == 0 {
    text = "+" ;
    }else{
    text = "-";
    }
    document.getElementById("Tempsign").innHTML = text;
   }
</script>

As I can't seem to figure out what I'm doing wrong here I ask again for advice

Heater. · 2015-04-12 09:49

Hmm...

I just changed my jsonp.js to read as follows:

sensor({
    temp: 19.1
});

Then in my web page I have the script tag that loads that:

    <script src="jsonp.js"></script>

At the end of my HTML.

Then I have this function in my HTML:

function sensor(data) {
    alert ("sensor.temp = " + data.temp);
    if (data.temp >= 0) {
        alert("+");
    } else {
        alert("-");
    }
}

Sure enough it alerts with "sensor.temp = 19.1". And then alerts again with "+".

Getting the numbers there should not be a problem. How you format them for display is up to you I guess.

Moskog · 2015-04-12 13:19

Once again, thank you Heater for leading me into the right way here, I think it works now with this code:

<script>
 
function sensorTemp (data) {
    document.getElementById("Temp1").innerHTML   = data.Temp1;
    document.getElementById("Temp10").innerHTML   = data.Temp10; 
    if (data.Tempsign < 1) {
      document.getElementById("Tempsign").innerHTML = "+";
    }else {
      document.getElementById("Tempsign").innerHTML = "-";
         }
    }
</script>

I discovered a mis-spelling in my last post that I was too blind to see, I wrote innHTML instead of innerHTML. The function would probably not have worked well anyway.

Now I do think I understand the syntax, next will be to check out the Switch-statement in javascript. Thanks again!

Cross browser problematics

Comments