locked
Multiple instance of a web pagein devTool RRS feed

  • Question

  • I can see multiple web page instance in DevTool (chrome). 

    

    At first i thought this is a default behavior, but then i realize the same is not true for other sites.

    Please see the code below 

     

     <script src='https://appsforoffice.microsoft.com/embedded/1.0/visio-web-embedded.js' type='text/javascript'></script>
        <script language="javascript">
    
            // Create an iframe to host the VisioOnline document
            document.write("<div id='iframeHost' />");
    
            // Hooking up with a SharePoint event, so that document is embedded when page is loaded.
            ExecuteOrDelayUntilBodyLoaded(initEmbeddedFrame);
    
            let session; // Global variable to store the session and pass it afterwards in Visio.run()
            let session1;
            //Function which embeds the Visio file in respective frame, created earlier.
            function initEmbeddedFrame() {
                var clean_uri = document.URL.substring(0, document.URL.indexOf("?"));
    
                if (sessionStorage.getItem('Home') == null || document.URL.indexOf("?") == -1) {
                    sessionStorage.setItem("Home", "not empty");
                    //document.getElementById('CurrentShape').innerHTML = " BIDDING STAGE ";
                    document.getElementById('CurrentShape1').innerHTML = " " + "BIDDING" + " ";
                    localStorage.setItem("shape", "BIDDING");
                    //document.getElementById('CurrentShape2').innerHTML = " Current Shape : " + "BIDDING" + " ";
                    //var clean_uri = document.URL.substring(0, document.URL.indexOf("?"));
    
                    window.location.href = clean_uri + "?FilterField1=" + "Stages" + "&FilterValue1=" + "BIDDING" + "";
                    //highlightShape("BIDDING");
                    //$("span:contains('OVERVIEW')").text("OVERVIEW " + sessionStorage.getItem("shape"));
    
                }
                //else if (document.URL.indexOf("?") == -1) {
                //   // document.getElementById('CurrentShape').innerHTML = " BIDDING STAGE ";
                //    document.getElementById('CurrentShape1').innerHTML = " Current Shape : " + "BIDDING" + " ";
                //   // document.getElementById('CurrentShape2').innerHTML = " Current Shape : " + "BIDDING" + " ";
                //    //var clean_uri = document.URL.substring(0, document.URL.indexOf("?"));
                //    window.location.href = clean_uri + "?FilterField1=" + "Stages" + "&FilterValue1=" + "BIDDING" + "";
                //}
                else {
                    // highlightShape(shapeDataItem.value);
                    //document.getElementById('CurrentShape').innerHTML = localStorage.getItem("shape") + " STAGE";
    
                    document.getElementById('CurrentShape1').innerHTML = " " + localStorage.getItem("shape") + " ";
    
    
                    //document.getElementById('CurrentShape2').innerHTML = " Current Shape : " + localStorage.getItem("shape") + " ";
                    //highlightShape(localStorage.getItem("shape"));
                    //$("span:contains('OVERVIEW')").text(localStorage.getItem("shape"));
                    //$("span:contains('OVERVIEW')").text("OVERVIEW " + sessionStorage.getItem("shape"));
                }
    
                // TODO_URL
                // Update the following url, with the desire Visio file url.
                var url = "https://domain.sharepoint.com/sites/Design/_layouts/15/Doc.aspx?sourcedoc={d939d71c-31b6-4c6f-ade6-5867e630dc5c}&action=embedview";
    
                url = url.replace("action=view", "action=embedview");
                url = url.replace("action=default", "action=embedview");
                url = url.replace("action=edit", "action=embedview");
                url = url.replace("action=interactivepreview", "action=embedview");
    
                session = new OfficeExtension.EmbeddedSession(
                    url,
                    {
                        id: "embed-iframe",
                        container: document.getElementById("iframeHost"),
                        height: "300px",
                        width: "95%"
                    });
    
                return session.init().then(function () {
                    window.console.log("Session successfully initialized");
                    Visio.run(session, (function (ctx) {
    
    
                        //alert("started");
                        //var app = ctx.document.application;
                        //app.showToolbars = false;
                        var application = ctx.document.application;
                        application.showToolbars = false;
                        application.showBorders = false;
                        var documentView = ctx.document.view;
                        //TODO_INTERACTIVITY
                        //Enable/Disable pan, zoom or hyperlinks in the drawing
                        documentView.disablePan = true; //Disable pan on document
                        documentView.disableZoom = true; //Disable zoom on document
                        //documentView.disableHyperlinks = true; //Disable hyperlinks on document
                        if (localStorage.getItem("shape") != null) {
                            // highlightShape(localStorage.getItem("shape"));
                        }
                        var doc = ctx.document;
                        eventResult = doc.onSelectionChanged.add(
                            function (args) {
                                var app = ctx.document.application;
                                //app.showToolbars = false;
                                //application.showBorders = false;
                                console.log("Selected Shape Name: " + args.shapeNames[0]);
                                var activePage = ctx.document.getActivePage();
                                var shape = activePage.shapes.getItem(args.shapeNames[0]);
                                var shapeDataItem = shape.shapeDataItems.getItem(0);
                                shape.view.highlight = { color: "#E7E7E7", width: 2 };
    
                                //shape.view.color = "#E7E7E7";
                                shapeDataItem.load();
                                return ctx.sync().then(function () {
                                    console.log(shapeDataItem);
                                    if (shapeDataItem.value) {
                                        var clean_uri = document.URL.substring(0, document.URL.indexOf("?"));
                                        window.location.href = clean_uri + "?FilterField1=" + shapeDataItem.label + "&FilterValue1=" + shapeDataItem.value + "";
                                        localStorage.setItem("shape", shapeDataItem.value);
                                        //var document = context.document;
                                        //document.setActivePage(shapeDataItem.value);
                                        //view.highlight = { color: "red", width: 3 };
                                        //var view = shape.view;
                                        //localStorage.setItem("shape", shapeDataItem.value);
                                        //highlightShape(shapeDataItem.value);
                                        //Highlight the shape
                                        //view.highlight = { color: "red", width: 2 };
                                    }
                                });
                            });
                        return ctx.sync().then(function () {
                            console.log("Handler attached");
                        });
                    })).catch(function (error) {
                        console.log("Error: " + error);
                        if (error instanceof OfficeExtension.Error) {
                            console.log("Debug info: " + JSON.stringify(error.debugInfo));
                        }
                    });
    
                    function onSelectionChanged(args) {
                        console.log(Date.now() + "Selection Changes Event" + JSON.stringify(args));
                    }
                });
            }
    
            function RemoveHandler() {
                if (!eventResult || !eventResult.context) {
                    console.log("Handler has not been attached");
                    return;
                }
    
                Visio.run(eventResult.context, function (ctx) {
                    eventResult.remove();
                    return ctx.sync().then(function () {
                        eventResult = null;
                        console.log("Handler removed");
                    });
                }).catch(function (error) {
                    console.log("Error: " + error);
                    if (error instanceof OfficeExtension.Error) {
                        console.log("Debug info: " + JSON.stringify(error.debugInfo));
                    }
                });
            }
            function highlightShape(shapeName) {
                Visio.run(session1, function (context) {
    
                    var activePage = context.document.getActivePage();
                    var shapes = activePage.shapes
                    shapes.load();
    
                    return context.sync().then(function () {
                        var shape = shapes.getItem(shapeName)
                        var view = shape.view;
                        //Highlight the shape
                        view.highlight = { color: "red", width: 3 };
                        context.sync();
                    });
                }).catch(function (error) {
                    window.console.log("Error: " + error);
                    if (error instanceof OfficeExtension.Error) {
                        window.console.log("Debug info: " + JSON.stringify(error.debugInfo));
                    }
                });
            }
    
        </script>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    
        <script>
    
            $(document).ready(
                function () {
                    // has to be on an interval for grouped doc libraries
                    // where the actual links are loaded only once a group
                    // is expanded
                    setInterval(
                        function () {
                            $("a[onclick*='return DispEx'][target!='_blank']")
                                .attr("target", "_blank")
                                .removeAttr("onclick");
    
                            // document type icons
                            $("td.ms-vb-icon>img[onclick]:not([documentUrl])")
                                .click(function (e) {
                                    window.open($(this).attr("documentUrl"), "_blank");
                                    e.stopPropagation();
                                    e.preventDefault();
                                    return false;
                                })
                                .each(function () {
                                    $(this).attr(
                                        "documentUrl",
                                        $.trim(String($(this).attr("onclick"))
                                            .split("=")[1]
                                            .replace(/["'{}]/g, "")
                                            .split(";")[0])
                                    );
                                    this.onclick = null;
                                });
                        },
                        500
                    );
                }
            );
    
        </script>
        <style>
            /* Hide Side Navigation */
            #sideNavBox {
                display: none;
            }
            /*Removes the column headers*/
            .ms-viewheadertr {
                display: none;
            }
            /* This #WebPart section removes the column headers */
            #WebPartWPQ1 .ms-viewheadertr {
                display: none;
            }
            /* And this #WebPart section removes the select/de-select checkmark column */
            #WebPartWPQ1 .ms-vb-itmcbx {
                display: none;
            }
    
            .InnerFrameBorder {
                border: 0;
            }
    
    
            .ms-webpart-titleText.ms-webpart-titleText {
                padding-left: 5px;
                color: white !important;
            }
    
            .js-webpart-titleCell {
                background-color: #a2a2a2 !important;
            }
    
            .ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
                color: white !important;
            }
    
            .ms-core-sideNavBox-removeLeftMargin {
                display: none
            }
    
            #contentBox {
                margin-left: 30px
            }
    
            .ms-siteicon-img {
                Display: none;
            }
    
            .ms-siteicon-img {
                margin-left: 0px
            }
    
            .ms-core-pageTitle {
                Display: none !Important;
            }
    
    
            #contentRow {
                background: white !important;
            }
    
            .ms-rte-layoutszone-inner {
                top: 50px !important;
            }
    
            .success {
                background-color: #a2a2a2;
                color: white;
                font-size: 22px;
            }
    
            .success1 {
                background-color: #00A1A8;
                color: white;
                font-size: 22px;
            }
        </style>
    
    </head>
    <body>
    </body>
    </html>
    



    • Edited by roma_victa Monday, July 22, 2019 6:37 AM
    Monday, July 22, 2019 6:35 AM

All replies

  • Hi,

    I can’t reproduce with similar script in my online environment.


    If you want to find ‘root cause’ for this, I would suggest you submit a ticket for this.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, July 23, 2019 7:36 AM