在 Dynamics 365 嵌入式 iframe Web 资源中使用加载微调器

Question

我正在尝试在 Dynamics 365 应用程序的嵌入式 iframe 中使用加载微调器。我正在使用这个库：https://loading.io/button/。我可以看到 CSS 正确加载，因为当 button/div 元素上有运行的 class 时它会显示旋转图标。

我想做的是在单击按钮时将 "running" class 添加到按钮中，这样用户就知道正在发生一个动作，他们应该期望在不久的将来。但是，当我有将 "running" class 添加到按钮的代码时，它似乎不起作用。这是我的代码：

$("#retakeButton").on("click", function () {
    $("#retakeButton").addClass('running');
    \\\ LOGIC GOES HERE \\\
    $("#retakeButton").removeClass('running');
});

这是我的 HTML:

    <div id="outerBorder" class="container embed-responsive ">
        <div class="col-md-12" id="topbuttons">
            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <div type="button" id="retakeButton" class="btn btn-primary hovering ld-over">
                        <strong>Take Photo</strong>
                        <div class="ld ld-ring ld-spin-fast"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="carousel" class="slideshow-container"></div>
        <br>
        <div id="dots" style="text-align:center"></div>
    </div>

奇怪的是，如果我打开控制台并将select iframe 作为目标，我可以通过运行 $("#retakeButton").addClass('running'); 让它显示正在进行的动画。但是，它似乎在 HTML.

引用的 javascript 中不起作用

Answer 1

我刚刚测试了这个，它的工作原理。

为了清晰可见，我为div添加了一个边框，并且注释掉了removeClass以进行测试（可能太快没有注意到）。

<div id="div_loader" class="btn btn-default ld-ext-top" style="border:solid; font-size:2em">
    <div class="ld ld-ring ld-spin-fast"></div>
</div>

$("#div_loader").on("click", function () {
    $("#div_loader").addClass('running');
      //do some logic
    //$("#retakeButton").removeClass('running');
});

最后一件事。问题可能出在 class hovering - 您可以删除并测试您的代码。

在 Dynamics 365 嵌入式 iframe Web 资源中使用加载微调器

Using a loading spinner in a Dynamics 365 embedded iframe web resource

html

javascript

jquery

dynamics-crm

dynamics-365