Question

我想知道是否有人可以帮助我我试图将功率块嵌入到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>

Answer 1

power bi tile嵌入式api要求您加载嵌入页面并传递参数，如我之前评论中参考的示例所示。你可以在浏览器中使用javascript来做到这一点，但我已经看过至少一个例子，有人在一个Android应用程序中只用托管在Web浏览器控件中的磁贴做了它。类似地，应该可以在windows通用应用程序中使用Web视图，使用navigate方法直接加载ifame url，使用scriptnotify通知加载的tile页面，然后使用invokescriptasync传递postmessage。如果这不能直接起作用，那么您可以使用navigatetostring将.js方法放在将帖子消息传递给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的图块

2 个答案: