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

Question

我想知道是否有人可以帮助我我正在尝试将 power bi 中的图块嵌入到 i 框架中。我尝试了很多方法，但似乎最终一无所获，或者只是加载符号 none 停止。下面这段代码我什么也没看到。还有一种方法可以不使用 java-script 来做到这一点。？

<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>

Answer 1

power bi tile 嵌入 api 要求您加载嵌入页面并传递参数，如我在之前的评论中引用的示例所示。您可以在浏览器中使用 javascript 来执行此操作，但我至少看到过一个示例，其中有人在 android 应用程序中执行了此操作，并且仅将磁贴托管在 Web 浏览器控件中。类似地，应该可以在 windows 通用应用程序中使用 Web 视图，使用导航方法直接加载 ifame url，使用 scriptnotify 获取加载磁贴页面的通知，然后传递 post 使用 invokescriptasync 的消息。如果这不能直接起作用，那么您将使用 navigatetostring 在页面上放置一个 .js 方法，将 post 消息传递给 iframe。我还没有机会自己玩这个。如果你让它工作，我很乐意看到你工作的要点。

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

Answer 2

这些更改最终修复了它，作为一个快速修复，但我打算进一步调查这个问题并找到一个更好的解决方案，而不是使用 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>

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

Display a tile from Power BI within an Iframe c#

javascript

c#

iframe

razor

powerbi