Embed/Iframe/Object and SPA

2 posts, 1 answers
  1. Erik Gantar
    Erik Gantar avatar
    7 posts
    Member since:
    Oct 2005

    Posted 29 Dec 2015 Link to this post

    Problem:

    During creating a pdf previewer for an application, kendo MVVM approach has presented a problem with rebinding embed/iframe/object elements. When the layout gets placed and values are bound the embed element calls the binded src value twice (one gets canceled, the other gets displayed). In chrome this behavior  starts with first bind of the layout, while in ie11, this happens after binding the layout for the second time.

    In case when working with views the requests are compounded and go up for additional request (first time twice, third time four times, then six...)

    Is there a way to bypass that or do we have to approach it with a completely different angle?

    For easier understanding of the problem I pasted sample code. In case my problem didn't come quite across: To see what I'm talking about check chrome developer tools (F12) and go to Network tab. Then click the Show pdf text  a couple of times.

    Javascript:

    01.$(function () {
    02.    var obs_global_layout = new kendo.observable({
    03.        id_1: "",
    04.        id_2: ""
    05.    });
    06. 
    07.    var obs_leftSide = new kendo.observable({
    08.        show_pdf: function (e) {
    09.            global_layout.showIn("#rightSide", right_layout);
    10.        }
    11.    });
    12. 
    13.    var obs_rightSide = new kendo.observable({
    15.    });
    16. 
    17.    global_layout = new kendo.Layout("layout", {
    18.        model: obs_global_layout,
    19.        wrap: false
    20.    });
    21. 
    22.    left_layout = new kendo.Layout("lefter", {
    23.        model: obs_leftSide,
    24.        wrap: false
    25.    });
    26. 
    27.    right_layout = new kendo.Layout("viewer", {
    28.        model: obs_rightSide,
    29.        wrap: false
    30.    });
    31. 
    32.    global_layout.render($("#wrapper"));
    33.    global_layout.showIn("#leftSide", left_layout);
    34.});

    Html: 

    01.<!DOCTYPE html>
    02.<html>
    03.<head>
    04.    <title></title>
    05.    <meta charset="utf-8" />
    06.    <script src="jQuery/jquery.min.js"></script>
    07.    <script src="kendoUI/js/kendo.web.min.js"></script>
    08.    <style>
    09.        body, html {margin:0;padding:0;height:100%;}
    10.        #wrapper, .embed {height:100%;}
    11.        #leftSide {float:left;width:25%;height:100%;}
    12.        #rightSide {float:left;width:75%;height:100%;}
    13.    </style>
    14.</head>
    15.<body>
    16.    <div id="wrapper">
    17.         
    18.    </div>
    19. 
    20.    <script type="kendo/template" id="layout">
    21.        <div>
    22.            <div id="leftSide">
    23. 
    24.            </div>
    25.            <div id="rightSide">
    26. 
    27.            </div>
    28.        </div>
    29.    </script>
    30. 
    31.    <script type="kendo/template" id="lefter">
    32.        <div class="link">
    33.            <span data-bind="click: show_pdf">Show pdf</span>
    34.        </div>
    35.    </script>
    36. 
    37.    <script type="kendo/template" id="viewer">
    38.        <div class="embed">
    39.            <iframe width="100%" height="100%" data-bind="attr: {src: pdf_link}" />
    40.        </div>
    41.    </script>
    42.    <script src="default.js"></script>
    43.</body>
    44.</html>

  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Jan Link to this post

    Hello Erik,

     

    I think I replicated the problem here. The problem comes from the "nature" of the iframe and the way the SPA views are implemented; They attach and detach from the DOM, and this causes the iframe to re-request the address each time. And the MVVM setter is responsible for the second request. I can't think of something to work around this, so my suggestion would be to approach the problem from a different angle.

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top