Differences
This shows you the differences between two versions of the page.
|
dglux5_wiki:widgets_and_property_inspector:components:iframe:home [2020/01/30 17:05] itsarev [Troubleshooting] |
dglux5_wiki:widgets_and_property_inspector:components:iframe:home [2021/09/20 15:03] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | {{indexmenu_n>8}} | ||
| - | ====== IFrame ====== | ||
| - | The IFrame component allows you to embed web content in your page. This component has several uses. | ||
| - | For a detailed reference of properties that affect IFrames, see [[dglux5_wiki:widgets_and_property_inspector:property_inspector:allcomponents:home|Common Properties]] and [[dglux5_wiki:widgets_and_property_inspector:property_inspector:iframe:home|IFrame Properties]]. | ||
| - | |||
| - | {{:dglux5_wiki:widgets_and_property_inspector:dglux5_components_iframe_0.png?direct|}}\\ | ||
| - | {{:dglux5_wiki:widgets_and_property_inspector:dglux5_components_iframe_1.mp4|}}\\ | ||
| - | //An IFrame component in DGLux5// | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Embed Web Content ===== | ||
| - | To create an IFrame component that embeds web content in your page: | ||
| - | - In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]] or [[dglux5_wiki:workspace_and_workflow:panels_and_menus:document_window|Document window]], right-click and select **Insert** > **Components** > **IFrame**. | ||
| - | - In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:properties_panel|Property Inspector]], under **IFrame**, specify the URL. | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Embed PDF ===== | ||
| - | To embed a PDF file in your page: | ||
| - | - [[dglux5_wiki:workspace_and_workflow:panels_and_menus:project_panel|Upload]] the PDF file to the project's ''assets'' folder. | ||
| - | - Insert an IFrame component. | ||
| - | - <WRAP>For the URL of the IFrame component, drag the PDF file from the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:project_panel|Project panel]]. | ||
| - | |||
| - | The PDF is embedded in the page.</WRAP> | ||
| - | |||
| - | ---- | ||
| - | |||
| - | |||
| - | /*Mostly copied from Page Include. Edit in both places.*/ | ||
| - | |||
| - | ===== Enable Page Changes with Button Control ===== | ||
| - | You can create a button panel that lets the user determine which URL is loaded in an IFrame. There are several ways to do this. These steps show you how to achieve this effect using a [[dglux5_wiki:dataflow:dataflow_blocks_reference:logic:case|Case]] dataflow block. Alternatively, you could create an onClick [[dglux5_wiki:actions:home|action]] for each button, as shown in [[https://vimeo.com/111882010|this video]], or you could create a button [[dglux5_wiki:widgets_and_property_inspector:components:symbols:home|symbol]] that holds the URL as one of its parameters. | ||
| - | |||
| - | To use a Case block for IFrame navigation: | ||
| - | |||
| - | - Right-click the Stage in the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]] or [[dglux5_wiki:workspace_and_workflow:panels_and_menus:document_window|Document window]], and select **Insert** > **Components** > **IFrame**. | ||
| - | - Create the button panel: | ||
| - | - Right-click the Stage and select **Insert** > **Components** > **Group**. | ||
| - | - In the Property Inspector, set the **Layout** property of the group to Horizontal or Vertical. | ||
| - | - <WRAP>Insert a [[dglux5_wiki:widgets_and_property_inspector:components:text:home|text component]] within the group. | ||
| - | |||
| - | This is your first button. Optionally, style your button using [[dglux5_wiki:workspace_and_workflow:panels_and_menus:properties_panel|properties]] and [[dglux5_wiki:actions:home|actions]].</WRAP> | ||
| - | - When your button is styled, select it in the Outline and click {{:dglux5_wiki:59_icn-tool-copy.png?nolink|}} **Duplicate** until you have the correct number of buttons. | ||
| - | - Change the text that appears in each button. Each button should refer to the page that it opens. | ||
| - | - In the Outline, select the group. | ||
| - | - In the Property Inspector, set **Selection** to {{:dglux5_wiki:194_pi_selection_single.png?nolink|}} **Single Select**. | ||
| - | - Right-click the IFrame, and select {{:dglux5_wiki:92_icn-dataflow-icon.png?nolink|}} **Dataflow**. | ||
| - | - In the dataflow window, expand **Logic**, and add a Case block: | ||
| - | - Drag the Case block to the dataflow window. | ||
| - | - Inside the block, click the {{:dglux5_wiki:33_plus-small.png?nolink|}} plus sign until the number of **case //n//** properties matches the number of URLs you want. | ||
| - | - Set **op** to equals. | ||
| - | - Bind the **Selection Index** property of the group to the **input** property of the Case block. | ||
| - | - For each **case //n//** property, enter an index number in your group. | ||
| - | - For each **then //n//** property, enter the URL. | ||
| - | - For **else**, enter a default path, or leave it null. | ||
| - | - Bind the **output** property of the case block to the **URL** property of the IFrame. | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Implement Custom JavaScript ===== | ||
| - | You can use the IFrame component to implement custom JavaScript in your page. For detailed instructions, see [[dglux5_wiki:dgscript:custom_javascript|Adding a Custom JavaScript Component]]. | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Embed Video ===== | ||
| - | One use of the IFrame component is to embed a video that is hosted on another website such as Vimeo or YouTube. | ||
| - | |||
| - | To upload and embed a video file, use the [[dglux5_wiki:widgets_and_property_inspector:components:video:home|Video]] component. | ||
| - | |||
| - | To embed a video from the web: | ||
| - | - <WRAP>Copy the URL for the video player. | ||
| - | |||
| - | To get a link, click on **Embed** (YouTube) or **Share** (Vimeo).</WRAP> | ||
| - | - Right-click in the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]] or [[dglux5_wiki:workspace_and_workflow:panels_and_menus:document_window|Document window]], and select **Insert** > **Components** > **IFrame**. | ||
| - | - Make sure the IFrame is selected, and in the Property Inspector, under **IFrame**, paste the URL. | ||
| - | |||
| - | ---- | ||
| - | ====== ====== | ||
| - | {{page>dglux5_wiki:widgets_and_property_inspector:property_inspector:iframe:home&firstseconly&noreadmore}} | ||
| - | |||
| - | ===== Troubleshooting ===== | ||
| - | |||
| - | If you try to load HTTP content using IFrame on HTTPS DGLux installation, browsers including Chrome do not allow such thing by default. It is not secure to load HTTP content via an HTTPS connection since that content might be compromised. So for the IFrame to work properly you need to load it from a server with HTTPS. | ||
| - | |||
| - | Another potential obstacle is **Origin Policy** which browser has to follow. Some domains (for example, google.com) send a header **X-Frame-Options** that disallow loading a page in an IFrame from the domain different from the origin. More on this topic [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options|here]]. However, some of the web services are more “friendly", for example, Youtube. So basically you need to make sure that the web server of the page you’re trying to load doesn’t send such a header. Use Developer Tools in Chrome to see all the error messages related to that. | ||
| - | |||
| - | ---- | ||
| - | |||
| - | <WRAP left>[[dglux5_wiki:widgets_and_property_inspector:components:map_group:home|Previous: Map Group]]</WRAP> | ||
| - | <WRAP right>[[dglux5_wiki:widgets_and_property_inspector:components:page_include:home|Next: Page Include]]</WRAP> | ||