CSS需要在内联样式iframe上覆盖元素{position：fixed！important; z-index：2147483647！important}

Question

我正在开发一个电源BI嵌入，可以点击它来全屏显示。它将启动一个具有内联样式的Iframe。并定义如下：

此外，我有自己的元素，我想在它上面渲染。代码如下：

<div onclick="console.log('test')" ng-if="vm.openWidget === vm.wid" style="position: fixed !important; bottom: 50px; right: 50px; height: 50px; width: 200px; background: red; z-index: 99999999999">

    <div style="color: white;" ng-click="vm.exitFullScreen()" >
        ICON TO CLICK
    </div>
    test {{ vm.wid }}
</div>

我使用AngularJs 1.5作为前端框架。我展示了但是点击被重叠的力量覆盖了。一旦我关闭嵌入，我可以单击div，它将工作。

但是我想让它在power embed overlay之上工作。

为了完整性，我在下面列出了html代码：

<div ng-show="vm.loadingContent" class="loader"></div>




<div ng-show="!vm.loadingContent">
    <!--child: {{ vm.childReport }}-->



    <!-- When the widget hasn't been configured. -->
    <div ng-if="vm.powerbiNotConfigured != ''">
        {{ vm.powerbiNotConfigured }}
    </div>

    <!-- when the widget is configured. -->
    <section>
        <div>
            <i class="ms-Icon ms-Icon--FullScreen" aria-hidden="true" ng-click="vm.showFullScreen(e)"></i>
        </div>


        <div class="row" ng-show="vm.powerbiNotConfigured == '' && vm.viewType == 'dashboard'">
            <ul class="breadcrumb" style="margin-left: -5px; margin-bottom: 0; padding-top: 0;">
                <li><a role="button" ng-click="vm.backToDashboard()" href="javascript:void(0)">{{::vm.dashboardName}}</a></li>
            </ul>
        </div>


        <section style="position: relative;">
            <div class="embedContainer powerbIContainer" ng-class="{ 'powerbiDashboard' : vm.powerbiNotConfigured == ''}" ng-style="vm.widgetHeight" style="z-index: 300 !important"></div>

        </section>

    </section>



</div>


<div onclick="console.log('test')" ng-if="vm.openWidget === vm.wid" style="position: fixed !important; bottom: 50px; right: 50px; height: 50px; width: 200px; background: red; z-index: 99999999999">

    <div style="color: white;" ng-click="vm.exitFullScreen()" >
        ICON TO CLICK
    </div>
    test {{ vm.wid }}
</div>

Answer 1

如果您想收听信息中心上的点击次数（看起来您正在嵌入信息中心），您可以设置平板电脑点击事件的监听器，这样iframe就不会吞下您的点击次数。您还可以从事件中获取数据，这将有助于您将图块嵌入全屏（embedUrl，tileId ...）。以下是实时样本（https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html）

中的示例

// Get a reference to the embedded dashboard HTML element
var dashboardContainer = $('#dashboardContainer')[0];

// Get a reference to the embedded dashboard.
dashboard = powerbi.get(dashboardContainer);

// dashboard.off removes a given event listener if it exists.
dashboard.off("tileClicked");

// dashboard.on will add an event listener.
dashboard.on("tileClicked", function(event) {
    Log.log(event.detail);
});