javascript - 隐藏 iframe 上的动态元素

Question

我有一个页面，它使用 colorbox 加载 iframe(专有信息)。

我需要隐藏 iframe 中具有特定类的元素(需要几秒钟加载)。

我尝试过，但没有成功。控制台消息未被命中。一旦它们被击中，我就可以使用 jQuery css 隐藏它们。

$(function () {

    'use strict';

    $(".className").ready(function () {
        console.log("className on class ready");
        $(".className").css("display", "none");
    });

    $(document).on("ready", ".className", function () {
        console.log("className on document ready");
        $(".className").css("display", "none");
    });

});

颜色框初始化:

function ShowColorbox(fileId) {

    'use strict';

    var colorboxUrl = getColorBoxUrl();

    $.ajax({
        type: "GET",
        url: colorboxUrl,
        dataType: "json",
        timeout: 30000,
        success: function (previewLink) {
            $.colorbox({ href: previewLink, iframe: true, width: "90%", height: "90%" });

        },
        error: function (jqXhr, textStatus, errorThrown) {
alert("failed");
        },
        complete: function () {
            // Do nothing
        }
    });

}

纯 CSS 方法(也不起作用):

<style>
        .className .UITextTranformUpperCase {
            display: none;
        } 
    </style>

Answer 1

您的 colorbox 使用动态 URL 来显示内容。您必须确保在查找元素之前加载内容。

您只需设置 fastIframe属性设置为 false 并添加一个 onComplete 处理程序，它应该可以工作:

$.colorbox({ 
    href: previewLink, 
    iframe: true, 
    width: "90%", 
    height: "90%",
    fastIframe: false,
    onComplete : function() {
        $('#cboxIframe').contents().find('.className').hide();
    }
});

请验证您的 colorbox iframe 是否具有 ID cboxIframe。如果没有，请更新 iframe 选择器