简介

在将磁贴集成到应用的步骤 3获取 Power BI 磁贴)中,你将获取 Power BI 磁贴。 在此步骤中,你要将磁贴加载到 IFrame

若要将磁贴加载到 IFrame,请将 IFramesrc 属性设置为磁贴embedUrl 属性,并创建 onload 处理程序以使用访问令牌发布消息,从而访问磁贴视觉对象。 下面是用于将磁贴加载到 IFrame 的 JavaScript 代码。

将磁贴加载到 IFrame

//Configure IFrame for the tile after you have an Access Token. See Default.aspx.cs to learn how to get an Access Token
window.onload = function () {
    if ("" != document.getElementById('MainContent_accessToken').value)
    {
        var iframe = document.getElementById('iFrameEmbedTile');

        // To load a tile do the following:
        // Set the IFrame source to the EmbedUrl from the Get Tiles operation
        iframe.src = document.getElementById('MainContent_tileEmbedUrl').value;

        // Add an onload handler to submit the access token
        iframe.onload = postActionLoadTile;
    }
};

// Post the access token to the IFrame
function postActionLoadTile() {

    // Construct the push message structure
    // This is where you assign the Access Token to get access to the tile visual
    var messageStructure = {
        action: "loadTile",
        accessToken: document.getElementById('MainContent_accessToken').value,
        height: 500,
        width: 500
    };
    message = JSON.stringify(messageStructure);

    // Push the message
    document.getElementById('iFrameEmbedTile').contentWindow.postMessage(message, "*");;
}

如果你下载并运行集成磁贴示例,示例外观将类似如下。

结论

在本演练中,你学习了如何通过在仪表板中获取该磁贴并将其加载到 IFrame,将磁贴集成到应用。 可下载完整的集成磁贴示例,它显示了用于将磁贴嵌入到 ASP.NET Web 应用的所有部件。 还可查看完整的将磁贴集成到应用代码清单

另请参阅

注册 Power BI
将磁贴集成到应用演练
集成磁贴示例
配置集成磁贴示例
获取仪表板操作
获取磁贴操作
更多问题? 尝试参与 Power BI 社区