INLINE FRAME WIDGETS
© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
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).
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.
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.
"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.
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.
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.)