tableau_js_api/embed_wrapper.html at master · bryanthowell-tableau/tableau_js_api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <script type='text/javascript' src='http://{}/javascripts/api/tableau-2.js'></script>

    <title>Web Edit Embed Wrapper</title>

    <script>
        /*
            Must be the same as the domain declared by the embedding application page.
            You don't switch to this domain until later. In essence, this page lives in the
            domain of the Tableau Server up until it has determined that the web edit view is
            moving back to the standard viz embed. At that point, this page declares it is
            now in the domain of the application page that embeds this page as an iframe.
        */
        var declared_domain = '{yourdomain.com}'; // Change here

        var domain_name = 'http://{yourdomain.com}'; // Change here

        // Simple parsing of the URL passed using the src= parameter in the URL
        var url_params = window.location.search;
        var src_param = url_params.split('src=')[1];
        //alert(src_param);
        view_location = src_param.split('views/')[1];


        var view_url = 'views/' + view_location;
        var edit_ending = 'authoring/' + view_location;

        // Check for /t/ which is the site location
        if ( src_param.indexOf('/t/') !== -1){
            site_location = src_param.split('t/')[1].split('/views')[0];
            var vizUrl = domain_name + "/t/" + site_location + "/" + view_url ;
            var edit_url = domain_name + "/t/" + site_location + "/" + edit_ending ;
        }
        else{
            var vizUrl = domain_name + "/" + view_url ;
            var edit_url = domain_name + "/" + edit_ending ;
        }

        var edit_frame_url = edit_url;

        var workbook_name;
        var view_name;

        var edit_iframe_load_count = 0;

        var viz;
        var book;
        var edit_hidden = true;
        var edit_iframe;
        window.onload = create_edit_iframe;

        function create_edit_iframe(){
            var edit_location = edit_url;
            edit_iframe = document.createElement('iframe');
            edit_iframe.src = edit_location;

            // These make everything seamless and it fills up the entire page (which is really the frame)
            edit_iframe.style.padding = '0px';
            edit_iframe.style.margin = '0px';
            edit_iframe.style.border = 'none';
            edit_iframe.style.position = 'absolute';
            edit_iframe.style.top = '0px';
            edit_iframe.style.left = '0px';

            // It seems width can be left to 100%, but height still needs to match what is in the full_embed outer page.
            // Might be better to match both with pixels. Real goal is no scrollbars. Adjust accordingly
            edit_iframe.style.width = '100%';
            edit_iframe.style.height = '100%';

            document.body.appendChild(edit_iframe);

            edit_hidden = false;
            // Find the iframe
            edit_iframe.onload = function(){

                if (edit_iframe_load_count > 0){
                   // Corrects for even if IE8 isn't in standards mode
                   var y = (edit_iframe.contentWindow || edit_iframe.contentDocument);
                   url_on_load = y.location.href;
                   //alert("new url: " + url_on_load + "\n" + "original url: " + edit_frame_url);
                   // Capture when try to load view based on the fragment
                   if ( url_on_load.search('/#/views') !== -1 || url_on_load.search('/#/site/') !== -1 || url_on_load.search('/t/') !== -1 ){
                        /*
                            Most essential part. This switches the declared domain so that the iframe
                            is now in the same "declared domain" as the originating page. This allows the
                            next call to the function in the parent page

                            Both parent page and this page must declare the same domain listed here.

                        */
                        document.domain = declared_domain;

                        // This function is declared in the application page
                        parent.iframe_change(url_on_load);
                    }
                }
                // Increment this after to skip the first run
                edit_iframe_load_count++;
           }

        }

    </script>
</head>

<body>

</body>

</html>