Using iframe

The Window could be forced to display its content in an <iframe> element using the Iframe(true) configuration method.

Important

  • Loading HTML fragments (partial content) inside an iframe is an incorrect approach. Iframe pages have to include a DOCTYPE, html, head, and body tags, just like a standard web page does.
  • It is not recommended to use an iframe on iOS devices. Iframes on these devices are not scrollable and always expand to match the content.

The example below demonstrates how to access the window and document objects inside the iframe. To achieve this, the nested page has to belong to the same domain as the main page. The iframe is accessed through the element of the Window widget.

Example
@(Html.Kendo().Window()
    .Name("window")
    .Title("Iframe Window")
    .Iframe(true)
    .LoadContentFrom("Content", "Home")
)

<script>
    $(function() {
        var windowElement = $("#window");
        var iframeDomElement = windowElement.children("iframe")[0];
        var iframeWindowObject = iframeDomElement.contentWindow;

        var iframeDocumentObject = iframeDomElement.contentDocument;
        // which is equivalent to
        // var iframeDocumentObject = iframeWindowObject.document;

        var iframejQuery = iframeWindowObject.$; // if jQuery is registered inside the iframe page, of course
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article