User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata


General

Component Palette Icon:


Description

The Inline Frame component enables you to display a webpage within the component, allowing another HTML page to be embedded in the view.

Note that many websites will not support rendering if they're inside a frame, such as this component. Website choose to opt in to this via the x-frame-options HTTP header, which all browsers support. The x-frame-options header is designed to help prevent a class of web security attacks called Clickjacking. 

Thus, if a given page returns a DENY or SAMEORIGIN value for x-frame-options, then a web browser will refuse to render the content in the iframe on your Perspective page. 

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
srcThe source URL of the webpage you want to embed in this frame.value: string
allowFullScreenWhether or not to allow embedded webpage to display full screen. Default is false.value: boolean
referrerPolicy

Referrer Policy is used to determine what information is sent along with the requests. The referral value is stripped when going from a page using HTTPS to a page using the HTTP protocol. This is because this is the default setting for the Referrer Policy if nothing is specified. Technically, this is “no-referrer-when-downgrade,” which means it will strip the referral when downgrading to an insecure request like switching from HTTPS to HTTP. You don’t have to use the default setting, though. Options as follows:

  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
value: string dropdown
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
borderSpecifies how the border property is set on the webpage inside the Inline Frame. The default is unset. To set a border, use the borderStyle property in Style on this component. Using the borderStyle property on the component overrides the border property.value: string


Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Example

Property

Value

props.srchttps://www.youtube.com/embed/hYXUZeLw5ek
props.allowFullScreentrue
props.referrerPolicy

origin

props.style.borderStyleridge
props.style.borderWidth6px
props.style.borderColor#FF8C00


  • No labels