Frames

Frames are a major way to modularize the design of complex applications. Since pages presented in frames are independent of each other they can fail without impact on other pages. In addition preparing content in individual HTML files largely simplfies the workflow of content production.

This approach, however, has limitations:

Some pages may prevent embedding them by 'X-Frame-Options', e.g. www.apple.com
Sites with responsive design might not be able to detect the available space, e.g. de.wikipedia.org
Touch events are not dispatched correctly to multiple frames on platforms with TouchEvents, e.g. if frame one receives touch1, all related touch points touch2, ... touchN, are send to frame1 although they might occur over frame two.

To solve the last mentioned problem, we prevent frames form touch events by assigning a

pointer-events: none;

style. A wrapping div is used to capture the events instead. Captured events are collected by an InteractionMapper and distributed as synthesized mouse or touch events to the wrapped iframes.

Let's look at an example of two HTML IFrames embedded in this Doctest.


<div id="frameWrapper1">
    <iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
</div>
<div id="frameWrapper2" style="padding: 4px">
    <iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
</div>

The distribution of events is handled by the enclosing container. The container registers a InteractionMapper and provides adapter for iframes, that implement IInteractionTarget by sending programmatically generated events. If you test these frames on a multitouch device you will notice that the scatters within the frames can be manipulated independently of each other:

Frames

References