Develop Reference

What are the -interactive- alternatives to IFrames

Well met!
I am working on a project similar to the Windows 8 tile-interface, only for Websites.
The idea is that, when a tile is clicked, it grows to fill the site (leaving a menu-bar on the top free) and the user can reguarly browse the loaded site. When he clicks a button on the menu-bar, the tile grows back.
My approach was to use IFrames. But those can be disabled through a HTTP-option by the visited site, or by using some javascript to test window toplevel.
Therefore I need some kind of alternative to IFrames. The best thing I was able to find was the JQuery .load(url), which only displays the content of the site, not making it regulary useable. It was very slow in my tests, too.
Is there something I can use, or do I have to drop the idea?
Thanks in advance!

Loading resources from different origins is very limited on the client side. Your best bet is probably a proxy on the server side (which isn't a perfect solution as it's used by scammers, read about it carefully) - I remember this iPad simulator has a fake Mobile Safari browser which uses php simple proxy.

Using Client Side Technology ...
jQuery's .load() will fetch the resource using AJAX and is constrained by the same-domain origin policy (security sandbox) that is inherent to the XMLHttpRequest object.
an iFrame will load the resource but as you pointed out it has drawbacks.
Using Server Side Technology ...
if you have only a few websites in the tiles that will need to be opened, you could preload them using a server side technology (php, jsp, asp) and hide them in a container object (like a div element) and then programmatically show them when the user activates the tile though a hover or click event.
Using java for example, you could use the java.net library to open a string buffer, read and save the contents of the website, and then add the variable to the servlet response. Using JSTL you would output the variable from the response object.

How to use Backbone.js for single page websites in a certain way

Essentially, I want to create a personal website that functions like this one:
https://sublime.wbond.net/packages/Jade
Whereby it's contained within one HTML page and clicking on a nav item will only load the required information.
Looking at the javascript code I believe the developer is using Backbone.js and Handlebars.js. I think they used PHP for the backend.
There is a key functionality that I'm after that is within this site. Essentially, when you are at the aforementioned directory, and then you change to https://sublime.wbond.net/docs, there will be an AJAX request for only the HTML that's needed and then it is appended to the current page.
Having written a simple backbone app by following a tutorial, it seems it's done differently. Hosting the app using node, it will load all of the content. When you go to another directory, it still loads all the content and then backbone will append the right piece based on the URL. I can see this being useful for certain kinds of apps, but I don't want that functionality. I looked into it more and I thought about using the fetch() functionality in backbone, but I'm not too sure he's using that either.
It appears like he's doing something like Rendr by Airbnb. I can't really use that because there the documentation is not sufficient right now.
It looks like when you call a page it just gives you the HTML all ready without the need to compile it locally. Is there something I'm missing here in terms of utilizing backbone or is this just some tool he's made to handle this?

If you are not afraid spending hours in front of videos, those excellent screencasts could get you started : the guy explains how to build a Single-Page app using Backbone and Marionette, from scratch.

This web site is not using Backbone, and the solution he uses is a mixte of full html page load and JSon call, look at this links :
https://sublime.wbond.net/browse.json
https://sublime.wbond.net/search.json
https://sublime.wbond.net/docs.html
https://sublime.wbond.net/news.html
https://sublime.wbond.net/stats.json

The simplest way to have the same behavior as wbond.net will be to change the way you render the page on the backend. You need to check if request is XHR and render only content, without layout. On the frontend you need to bind click event to each links which will send AJAX request on binded URL and put whole response in the page content area (jQuery's $.get() method).

How to detect load requests of iframe content elements?

I'm trying to create a secure Darknet with WebRTC DataChannels in pure HTML, so I'm not interested about to know when an iframe has been fully loaded, but instead I'm interested to capture the iframe elements (inline images and so) using a custom scheme so I can be able from the parent page (the one connected to the Darknet) to do the real request and response with the actual data. With FirefoxOS mozbrowserlocationchange event of the Browser API objects (an extension to iframes) I could be able to capture the user navigation, cancel it, do the real request on the Darknet and later inject the iframe with the real content fetched by the parent page, but how could I be able to do the same with inline images and scripts on this loaded page? Or is this not currently possible and should I ask to them about add this functionality?
Obviously, I don't have any control about the iframes content pages, so they would be created by whatever and in any way, and also the usage of Browser API is just because seems to be the most useful to whan I'm trying to do, ideally it would be perfect if this is possible to achieve with plain iframes... :-)
Update:
A half-solution I have thinking about would be since I could be able to capture the mozbrowserlocationchange event to do the real content request of the HTML page and before fill the iframe with it do the request of their linked images and scripts and set them inline to prevent the iframe from doing more request. This would only lead to somewhat very simple web pages compared to current web standards (no AJAX, no async loading of script tags...) but definitely it would be usable up to some point :-)
Anyway, is there any other better alternative?

That sounds like something, that would be possible (straightforward, even) as soon as Service Controllers (previously known as NavigationControllers) are implemented, but I do not know any way to accomplish this via any currently available method.
No wonder you didn't find info about this - the proposal is called "Service workers" (though, previously this was called Event workers, and even before that, they were called - guess what - navigation controllers). This is a lively spec! ;) Find the working draft on GitHub: https://github.com/slightlyoff/ServiceWorker/ with a lengthy explainer document that should get you going.
Also, there is a document with the current Chrome (blink) implementation plans.

How to write live testing app for HTML and JS and capture page load events

I'm writing an in-browser Chrome app that will allow users to edit HTML and JS code and then be able to test their changes live.
My current method of doing this is to create a new window with JavaScript, create an IFrame in that window, and then inject the user's HTML or JS code into the IFrame. The problem with this though, is that the page load events of the IFrame can't be used by the script being live-tested. My app could manually call testWindow.iframe.contentWindow.onload, but that wouldn't work with the various events and methods used by the different JS libraries for their "domready"-style events.
Perhaps this is not possible, and I'll just have to send the code to the server and have the server output it. I noticed apps like jsfiddle actually just ask what library and event you want.
Any ideas on how I can have live-testing in my app and still fire page loading events for the JS being tested?

You could use dispatchEvent on the iframe, which you know will be supported since you are making a Chrome app. Alternatively, for absolutely certain cross-browser compatibility (or some other reason) you could also send the script to your server (using Ajax) to be stored in a database, then linked to in the new window.

Just heard a lightening talk on http://vowsjs.org/ this evening. Haven't used it yet but I plan to explore this for testing web apps.

Embedding web controls across sites - using IFrames/Javascript

I'm just looking for clarification on this.
Say I have a small web form, a 'widget' if you will, that gets data, does some client side verification on it or other AJAX-y nonsense, and on clicking a button would direct to another page.
If I wanted this to be an 'embeddable' component, so other people could stick this on their sites, am I limited to basically encapsulating it within an iframe?
And are there any limitations on what I can and can't do in that iframe?
For example, the button that would take you to another page - this would load the content in the iframe? So it would need to exist outwith the iframe?
And finally, if the button the user clicked were to take them to an https page to verify credit-card details, are there any specific security no-nos that would stop this happening?
EDIT: For an example of what I'm on about, think about embedding either googlemaps or multimap on a page.
EDIT EDIT: Okay, I think I get it.
There are Two ways.
One - embed in an IFrame, but this is limited.
Two - create a Javascript API, and ask the consumer to link to this. But this is a lot more complex for both the consumer and the creator.
Have I got that right?
Thanks
Duncan

There's plus points for both methods. I for one, wouldn't use another person's Javascript on my page unless I was absolutely certain I could trust the source. It's not hard to make a malicious script that submits the values of all input boxes on a page. If you don't need access to the contents of the page, then using an iframe would be the best option.
Buttons and links can be "told" to navigate the top or parent frame using the target attribute, like so:
This is a link
<form action="http://some.url/with/a/page" target="_parent"><button type="submit">This is a button</button></form>
In this situation, since you're navigating away from the hosting page, the same-origin-policy wouldn't apply.
In similar situations, widgets are generally iframes placed on your page. iGoogle and Windows Live Gadgets (to my knowlege) are hosted in iframes, and for very good reason - security.

If you are using AJAX I assume you have a server written in C# or Java or some OO language.
It doesn't really matter what language only the syntax will vary.
Either way I would advise against the iFrame methods.
It will open up way way too many holes or problems like Http with Https (or vice-versa) in an iFrame will show a mixed content warning.
So what do you do?
Do a server-side call to the remote site
Parse the response appropriately on the server
Return via AJAX what you need
Display returned content to the user
You know how to do the AJAX just add a server-side call to the remote site.
Java:
URL url = new URL("http://www.WEBSITE.com");
URLConnection conn = url.openConnection();
or
C#:
HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create("http://www.WEBSITE.com");
WebResponse res = req.GetResponse();

I think you want to get away from using inline frames if possible. Although they are sometimes useful, they can cause issues with navigation and bookmarking. Generally, if you can do it some other way than an iframe, that is the better method.
Given that you make an AJAX reference, a Javascript pointer would probably be the best bet i.e. embed what you need to do in script tags. Note that this is how Google embed things such as Google Analytics and Google Ads. It also has the benefit of also being pullable from a url hosted by you, thus you can update the code and 'voila' it is active in all the web pages that use this. (Google usually use version numbers as well so they don't switch everyone when they make changes).
Re the credit card scenario, Javascript is bound by the 'same origin policy'. For a clarification, see http://en.wikipedia.org/wiki/Same_origin_policy
Added: Google Maps works in the same way and with some caveats such as a user/site key that explicitly identify who is using the code.

Look into using something like jQuery, create a "plugin" for your component, just one way, and just a thought but if you want to share the component with other folks to use this is one of the things that can be done.