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");
    });

});

Colorbox init：

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使用动态网址作为内容。在查找元素之前，您必须确保已加载内容。

您只需将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选择器

Answer 2

这就是我过去的做法：

$('iframe.yourclass').load(function(){
    $iframe = $('iframe.yourclass').contents();
    $iframe.find('.class-selector').css('display','none');
});

但是，如果iframe位于同一个域中，您是否可以编写简单的css来定位该元素。或者您可能无法访问CSS？

隐藏iframe上的动态元素

2 个答案: