This continues our series on making an info screen. Last time, we created a skeleton layout, so let us begin filling it with contents.
As an example, let us try to display current and hourly weather using this webpage:
https://www.theweathernetwork.com/ca/hourly-weather-forecast/ontario/mississauga
The most straightforward way of putting something from the third-party website into your own would be an IFRAME tag, of this global format:
Now usually you would only need some portion of the website displayed on your screen. Unfortunately, if the contents of your IFRAME is from the third-party website, you cannot interact with its content (with a very few exceptions) due to the commonly accepted same-origin policy. (Annoying as it is in our case, this limitation is what prevents a fair amount of malicious attacks.)
However, the desired portion of the website can be extracted via re-positioning the iframe using this negative margin trick:
To zoom in or out on the corresponding website, the only way is to use CSS transform property, like so:
This gives us something like:
As you can see, this method is very easy to code and there is no need (and no possibility for that matter) to do any rearrangement of the displayed information. The target website takes care of that for you.
Two major pitfalls (besides the above mentioned inability to interact with the iframe contents) are:
As an example, let us try to display current and hourly weather using this webpage:
https://www.theweathernetwork.com/ca/hourly-weather-forecast/ontario/mississauga
 |
| Highlighted are regions I'd like to put on the info board. |
The most straightforward way of putting something from the third-party website into your own would be an IFRAME tag, of this global format:
<IFRAME scrolling="no" src="..." style="..."></IFRAME>
Now usually you would only need some portion of the website displayed on your screen. Unfortunately, if the contents of your IFRAME is from the third-party website, you cannot interact with its content (with a very few exceptions) due to the commonly accepted same-origin policy. (Annoying as it is in our case, this limitation is what prevents a fair amount of malicious attacks.)
However, the desired portion of the website can be extracted via re-positioning the iframe using this negative margin trick:
style="margin-left: -(XXX)px; margin-top: -(YYY)px;"
To zoom in or out on the corresponding website, the only way is to use CSS transform property, like so:
<div id="weather1" class="basic" style="position: relative; left: 5px; top: 10px; width: 500px; height: 180px;">
<iframe scrolling="no" src="https://www.theweathernetwork.com/ca/hourly-weather-forecast/ontario/mississauga"
style=" -webkit-transform: scale(0.72); -webkit-transform-origin: 0 0;
transform: scale(0.72); transform-origin: 0 0;
margin-left: -20px; margin-top: -200px;
border: 0px none; height: 8120px; width: 750px;">
</iframe></div>
<div id="weather2" class="basic" style="position: relative; left: 5px; top: 20px; width: 500px; height: 200px;">
<iframe scrolling="no" src="https://www.theweathernetwork.com/ca/hourly-weather-forecast/ontario/mississauga"
style=" -webkit-transform: scale(0.72); -webkit-transform-origin: 0 0;
transform: scale(0.72); transform-origin: 0 0;
margin-left: -30px; margin-top: -690px;
border: 0px none; height: 8120px; width: 750px;">
</iframe></div>
(The -webkit- prefix is needed for browsers like the PlayBook's (or Safari); some other browsers may need other prefixes.)
This gives us something like:
As you can see, this method is very easy to code and there is no need (and no possibility for that matter) to do any rearrangement of the displayed information. The target website takes care of that for you.
Two major pitfalls (besides the above mentioned inability to interact with the iframe contents) are:
- Manual adjustment of the margin is very unreliable. Granted, other methods are prone to failing once the target web site undergoes a redesign, but here even a minor change of the layout would screw the placement of your desired content and require re-adjustment. What is worse, this may happen even without a website redesign proper, due to some external content (e.g. ads) affecting the elements' location and sizing. So your screen can intermittently show the wrong content, and may need frequent readjustments.
- Even though most of the iframe's target website will be hidden, it will still be loaded and processed (all its scripts, embedded videos, plugins, and ads included), which makes it very heavy on the client browser (especially on older hardware such as the PlayBook). Using transformation makes matters much worse (I guess it may even force the browser to have to "invisibly" render the entire page - how else would the browser know how to scale it?). In my testing, the above example rendered my PlayBook rather unresponsive.
So, this method would be prohibitively slow for many practically relevant cases. Still, it is a simple and viable method so long as the target URL is rather lightweight and not too loaded with dynamic HTML or embedded media. A good candidate is a mobile webpage or a page specially designed to be embedded, like this:
<div id="weather1" class="basic" style="position: relative; left: 10px; top: 10px; width: 300; height: 185px; background: white;"> <iframe scrolling="no" src="http://weather.gc.ca/wxlink/wxlink.html?cityCode=on-24&lang=e" allowtransparency="true" style="border: 0px none; height: 185px; width: 300px;"></iframe> </div>
