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

Question

我想知道是否有人可以帮助我我正在尝试将 power bi 中的图块嵌入到 i-frame 中。我尝试了很多方法，但我似乎最终什么也没得到，或者只是加载标志没有停止。下面的这段代码我什么也没看到。还有一种方法可以在不使用 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 视图，使用 navigate 方法直接加载 ifame url，使用 scriptnotify 获取加载的 tile 页面的通知，然后使用 invokescriptasync 传递 postmessage。如果这不能直接起作用，那么您将使用 navigatetostring 在将发布消息传递到 iframe 的页面上放置一个 .js 方法。我自己还没有机会玩这个。如果你得到它的工作，很想看到你的工作要点。

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>