This is a migrated thread and some comments may be shown as answers.

Embed/Iframe/Object and SPA

1 Answer 270 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 29 Dec 2015, 02:17 PM

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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 04 Jan 2016, 08:06 AM

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!
 
Tags
MVVM
Asked by
Erik
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or