INLINE FRAME WIDGETS

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Sharing

Working with Team Projects

Moving and Upgrading

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

REFERENCE

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

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. To embed a web-hosted page or file, use its URL; to embed a local file, use its local file path (see the limitations on local files below).

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.

 

MORE RESOURCES

LOCAL FILES

As a security measure, modern web browsers prevent websites from accessing a computer's local file system. This means that Axure RP prototypes hosted on Axure Share or viewed via the Preview option—which serves prototypes over a locally run web server—will not be able to access local files linked to in inline frame widgets.


If you have a local file embedded in an inline frame widget, you will need to view your prototype by generating its HTML files locally via "Publish > Generate HTML Files". (To learn more about this option, see our article on viewing and sharing the HTML output.)