INLINE FRAME WIDGETS

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

EXAMPLE USES

EMBEDDING EXTERNAL CONTENT

External HTML files, videos, and maps are some of the elements you can embed using inline frames. For content hosted online (like YouTube videos and Google Maps), the inline frame links to a URL. When linking to content that exists on your local drive or on a network drive, the frame links to a file path.

SIMULATING A MOBILE EXPERIENCE

With a device body widget added to your design, an inline frame can be added on top of the mobile device's screen area and linked to another page in your prototype. This will pull in the content from your other page and place it inside the inline frame, creating a realistic mobile experience on your computer.

ASSIGNING THE TARGET PAGE OR URL

Double-click an inline frame widget it to bring up the Link Properties dialog. You can choose from the other pages in the project or use the "Link to an external url or file" section to embed a page that is not in the RP file.

EDITING

LOCATION AND SIZE

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.


Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.

REMOVING THE BORDER

Right-click on the Inline Frame and select "Toggle Border" to add and remove the black border surrounding the inline frame.

SCROLLBARS

By default, an inline frame will show scrollbars if the embedded page is larger than the frame (the "Show as Needed" setting). To change the scrollbar setting, find the "Frame Scrollbars" dropdown in the Properties tab. You can choose "Show as Needed," "Always Show," or "Never Show."

THE PREVIEW IMAGE

You can add a preview inside the design area in Axure RP using the "Preview image" setting in the Properties tab. This preview image can hint at the contents of the frame from inside Axure RP. Choose from none, video, map, and custom, which allows you to upload your own image. The preview images will only appear on the canvas in Axure RP; they will not show in the browser.

INTERACTIVITY

"OPEN LINK IN FRAME"

You can dynamically set the target page for an inline frame widget. Choose the action "open link in inline frame" and pick a page in the project or enter an external URL.

"OPEN LINK IN PARENT FRAME"

The action "open link in parent frame" can be used from the page loaded in the inline frame to change the current page in the window containing the inline frame.

LIMITATIONS

EMBEDDING BLOCKED

Websites can choose to block the ability to embed their page in another page. Some examples of sites that cannot be embedded in an inline frame widget are Google, Facebook, Yahoo, and Twitter.

PASSING VARIABLES BETWEEN PARENT AND EMBEDDED PAGE NOT PERMITTED

It is not possible to pass variables back and forth between the parent and embedded page. To have two already-open web browser windows talk to each other is a type of web security violation called "cross-site scripting" and is not permitted by modern web browsers.