I forced the URL in the widget snippet to https in the docs because protocol-relative URLs are now an anti-pattern, but I realized that this means that the IFRAME created will be HTTPS instead of HTTP.
Unfortunately, this means that any files the user tries to load, such as via loadJSON(), will fail if the protocol isn't HTTPS due to mixed-content warnings. Indeed, the example sketch on the documentation for loadJSON() fails with just that problem:
var weather;
function preload() {
var url = 'http://api.openweathermap.org/data/2.5/weather?q=London,UK'+
'&APPID=7bbbb47522848e8b9c26ba35c226c734';
weather = loadJSON(url);
}
function setup() {
noLoop();
}
function draw() {
background(200);
// get the humidity value out of the loaded JSON
var humidity = weather.main.humidity;
fill(0, humidity); // use the humidity value to set the alpha
ellipse(width/2, height/2, 50, 50);
}
Changing the widget URL to be protocol-relative fixes this problem.
I forced the URL in the widget snippet to https in the docs because protocol-relative URLs are now an anti-pattern, but I realized that this means that the IFRAME created will be HTTPS instead of HTTP.
Unfortunately, this means that any files the user tries to load, such as via
loadJSON()
, will fail if the protocol isn't HTTPS due to mixed-content warnings. Indeed, the example sketch on the documentation forloadJSON()
fails with just that problem:Changing the widget URL to be protocol-relative fixes this problem.