在Iframe c#中显示Power BI的磁贴

本文关键字：BI Power 显示 Iframe | 更新日期: 2023-09-27 18:26:35

我想知道是否有人能帮我，我正在尝试将power bi的tile嵌入到I-frame中。我尝试了很多方法，但最终似乎一无所获，或者只是装载标志"不停"。下面的代码我什么也没看到。还有没有一种方法可以在不使用java脚本的情况下做到这一点。？

<script type="text/javascript">
    var width = 800;
    var height = 600;
    var embedTileUrl = @Model.Tile.embedUrl;
    var accessToken  = @Model.AccessToken;
    window.onload = function () {
        updateEmbedTile();
    };
    function updateEmbedTile() {
        if ("" === embedTileUrl)
            return;
        iframe = document.getElementById('iFrameEmbedTile');
        iframe.src = embedTileUrl + "&width=" + width + "&height=" + height;
        iframe.onload = postActionLoadTile;
    }
    function postActionLoadTile() {
        if ("" === accessToken)
            return;
        var h = height;
        var w = width;
        var m = { action: "loadTile", accessToken: accessToken, height: h, width: w };
        message = JSON.stringify(m);
        iframe = document.getElementById('iFrameEmbedTile');
        iframe.contentWindow.postMessage(message, "*");
    }
     </script>
    <iframe id="iFrameEmbedTile" src="" height="500px" width="500px" frameborder="0" seamless></iframe>

在Iframe c#中显示Power BI的磁贴

power-bi-tile嵌入api要求您加载嵌入页面并传递参数，如我在前面的评论中引用的示例所示。你可以在浏览器中使用javascript来做到这一点，但我至少见过一个例子，有人在安卓应用程序中这样做，而web浏览器控件中只托管了tile。类似地，应该可以在windows通用应用程序中使用web视图，使用navigation方法直接加载ifame url，使用scriptnotify获得加载的tile页面的通知，然后使用invokescriptasync传递postmessage。如果这不能直接起作用，那么您可以使用navigationstring在将post消息传递给iframe的页面上放置一个.js方法。我自己还没有机会玩这个。如果你能让它发挥作用，我很想看看你的工作要点。

https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview

这些更改最终修复了它，作为一个快速修复，但我打算进一步研究这一点，并找到一个不使用Javascript的更好解决方案。

修复了第一个问题：

 var accessTokenElement = "@Model.AccessToken";

修复了第二个问题：

<input type="text" id="tb_EmbedURL" value="@Model.Tile.embedUrl" hidden />
<input type="button" id="bEmbedTileAction" value="Embed Tile" hidden />
<iframe id="iFrameEmbedTile" src="" height="450" width="450" frameborder="0" align="middle" seamless></iframe>

这将自动加载。以下是代码的总体

<script type="text/javascript">
    window.onload = function () {
        var el = document.getElementById("bEmbedTileAction");
        if (el.addEventListener) {
            el.addEventListener("click", updateEmbedTile, false);
        } else {
            el.attachEvent('onclick', updateEmbedTile);
        }
        if (window.addEventListener) {
            window.addEventListener("message", receiveMessage, false);
        } else {
            window.attachEvent("onmessage", receiveMessage);
        }
        var accessTokenElement = "@Model.AccessToken";
        if (null !== accessTokenElement) {
            var accessToken = accessTokenElement.value;
            if ("" !== accessToken)
                updateEmbedTile();
        }
    };
    var width  = 450;
    var height = 450;
    function receiveMessage(event) {
        if (event.data) {
            try {
                messageData = JSON.parse(event.data);
                if (messageData.event === "tileClicked") {
                    //Get IFrame source and construct dashboard url
                    iFrameSrc = document.getElementById(event.srcElement.iframe.id).src;
                    //Split IFrame source to get dashboard id
                    var dashboardId = iFrameSrc.split("dashboardId=")[1].split("&")[0];
                    urlVal = iFrameSrc.split("/embed")[0] + "/dashboards/{0}";
                    urlVal = urlVal.replace("{0}", dashboardId);
                    window.open(urlVal);
                }
            }
            catch (e) {
                // In a production app, handle exception
            }
        }
    }
    function updateEmbedTile() {
        // check if the embed url was selected
        var embedTileUrl = document.getElementById('tb_EmbedURL').value;
        if ("" === embedTileUrl)
            return;
        iframe = document.getElementById('iFrameEmbedTile');
        iframe.src = embedTileUrl + "&width=" + width + "&height=" + height;
        iframe.onload = postActionLoadTile;
    }

    function postActionLoadTile() {
        accessToken = "@Model.AccessToken";
        if ("" === accessToken)
            return;
        var h = height;
        var w = width;
        var m = { action: "loadTile", accessToken: accessToken, height: h, width: w };
        message = JSON.stringify(m);
        iframe = document.getElementById('iFrameEmbedTile');
        iframe.contentWindow.postMessage(message, "*");;
    }
</script>
<input type="text" id="tb_EmbedURL" value="@Model.Tile.embedUrl" hidden />
<input type="button" id="bEmbedTileAction" value="Embed Tile" hidden />
<iframe id="iFrameEmbedTile" src="" height="450" width="450" frameborder="0" align="middle" seamless></iframe>
相关文章：