While it's not required to use option.iframe in case you want to load an iframe into the content section - everything can be done with option.content as well - option.iframe offers a more convenient way to load iframes.

option.iframe expects a configuration object as value and accepts all HTML5 compatible parameters.

The Default value of option.iframe is false.

Possible parameters:
Either one of the parameters srcdoc or src has to be set. All other parameters are optional.

• srcdoc HTML code
  Specifies the HTML content of the page to show in the <iframe>
  If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).
• src URL
  Specifies the address of the document to embed in the <iframe>
  If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).
• width integer | string e.g. "800px" or "100%"
  If option.size.width is set with a value other than "auto", the value of option.size.widthwill be used for option.iframe.width by default. In other words: setting option.iframe.width is only necessary when the iframe shall not have the same width as the jsPanel content area or when option.size.width is set to "auto".
• height integer | string e.g. "600px" or "100%"
  If option.size.height is set with a value other than "auto", the value of option.size.heightwill be used for option.iframe.height by default. In other words: setting option.iframe.height is only necessary when the iframe shall not have the same height as the jsPanel content area or when option.size.height is set to "auto".
• name string
  Specifies the name of the <iframe>
• sandbox string
  Enables a set of extra restrictions for the content in the <iframe>
  Please refer to http://www.w3schools.com/tags/att_iframe_sandbox.asp for details on this attribute
• seamless boolean
  When present, it specifies that the <iframe> should look like it is a part of the containing document (no borders or scrollbars).
  The seamless attribute of the <iframe> tag is currently not supported in any of the major browsers.
• id string
  Specifies the id of the <iframe>
• style object
  An object of css property-value pairs to apply to the <iframe>
• classname string | function
  string: One or more space-separated classes to be added to the class attribute of the <iframe>.
  function: A function returning one or more space-separated class names to be added to the <iframe>.

Example with the required minimum setup of option.iframe

$.jsPanel({
    iframe: {
        src: 'https://heute.de/'
    },
    size:     {width: 1000, height: 600},
    position: {left: "center", top: 10},
    theme:    "light"
});

Execute example 1

Example using more parameters

$.jsPanel({
    iframe: {
        width:  1200,
        height: 700,
        src:    'https://heute.de/',
        name:   'myFrame',
        style:  {'border': '10px solid transparent'}
    },
    size:     'auto',
    position: {left: 200, top: 10},
    theme:    'black'
});

Execute example 2

Example with the iframe display property initially set to "none". In the jsPanel callback the onload event of the iframe is used to fade in the iframe.

$.jsPanel({
    iframe: {
        src:    "https://heute.de/",
        id:     "myFrame",
        style:  {"display": "none", "border": "10px solid transparent"},
        width:  '100%',
        height: '100%'
    },
    callback: function () {
        document.getElementById("myFrame").onload = function(){
            $("#myFrame").fadeIn(2000);
        }
    },
    size:     {width: 1000, height: 600},
    position: {left: "center", top: 10},
    theme:    "black"
});

Execute example 3