On this page:

option.iframe

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>.

TIP: Setting option.iframe.width/height to "100%" will initially be no different to omitting option.iframe.width/height. But when you resize the jsPanel the iframe will also resize. That is not the case using pixel values.


Examples

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