Iframe Components
By setting a url as src attribute on the instance definition the componentManager will create an instance of the IframeComponent class to load the url in an iframe
The IframemComponent is exposed on the Vigor object so it's easy to extend it and create custom IframeComponents if additional logic is needed
Take a look at components.js to see component the setup for this example.
conditions:0components:3instances:4
var componentSettings = {
components: [
{
id: 'iframe-component',
src: 'http://en.wikipedia.org/wiki/Main_Page'
},
{
id: 'extended-iframe-component',
src: 'app.components.ExtendedIframeComponent',
args: {
iframeAttributes:{
src: 'http://en.wikipedia.org/wiki/Main_Page'
}
}
},
{
id: 'extended-iframe-component-that-sends-message',
src: 'app.components.ExtendedIframeComponentThatSendsMessage'
}
],
targets: {
first: [
{
id: 'iframe-instance',
componentId: 'iframe-component',
args: {
iframeAttributes: {
width: 600,
height: 400
}
}
}
],
second: [
{
id: 'iframe-instance-2',
componentId: 'extended-iframe-component',
args: {
iframeAttributes: {
width: 600,
height: 400
}
}
}
],
third: [
{
id: 'iframe-instance-3',
componentId: 'extended-iframe-component-that-sends-message',
args: {
iframeAttributes: {
width: 600,
height: 400,
style: 'border: 1px solid red',
src: 'http://localhost:7070/examples/iframe-components/iframed-example-page-1.html?id1=iframe-instance-3&=id2=iframe-instance-4'
}
}
},
{
id: 'iframe-instance-4',
componentId: 'extended-iframe-component-that-sends-message',
args: {
iframeAttributes: {
width: 600,
height: 400,
style: 'border: 1px solid blue',
src: 'http://localhost:7070/examples/iframe-components/iframed-example-page-2.html'
}
}
}
]
}
}
Component definition
{
"id": "iframe-component",
"src": "http://en.wikipedia.org/wiki/Main_Page"
}
Instance definition
{
"id": "iframe-instance",
"componentId": "iframe-component",
"args": {
"iframeAttributes": {
"width": 600,
"height": 400
}
}
}
ExtendedIframeComponent
Component definition
{
"id": "extended-iframe-component",
"src": "app.components.ExtendedIframeComponent",
"args": {
"iframeAttributes":{
"src": "http://en.wikipedia.org/wiki/Main_Page"
}
}
}
Instance definition
{
"id": "iframe-instance-2",
"componentId": "extended-iframe-component",
"args": {
"iframeAttributes": {
"width": 600,
"height": 400
}
}
}
ExtendedIframeComponentThatSendsMessage
Component definition
{
"id": "extended-iframe-component",
"src": "app.components.ExtendedIframeComponent",
"args": {
"iframeAttributes":{
"src": "http://en.wikipedia.org/wiki/Main_Page"
}
}
}
Instance definition
{
"id": "iframe-instance-2",
"componentId": "extended-iframe-component",
"args": {
"iframeAttributes": {
"width": 600,
"height": 400
}
}
}