在 iframe 上隐藏动态元素答案

【问题标题】：Hide dynamic element on iframe在 iframe 上隐藏动态元素
【发布时间】：2015-06-26 21:50:21
【问题描述】：

我有一个使用 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>

【问题讨论】：

你尝试过使用纯 CSS 吗？
页面是否在当前域中？如果不是，那么您不能定位 iframe same origin policy 中的元素
页面在同一个域但不同的子域
那么是可能的，但是您必须将 iframe 内容定位为对象。我在某个地方有代码，我会发布它。 iframe 是否有 id 或类？
您是否尝试将 js display none 添加到弹出窗口打开时的回调中？ onComplete: $(".className").css("display", "none");

标签： javascript jquery css iframe colorbox

【解决方案1】：

您的颜色框对内容使用动态 url。您必须确保在查找元素之前已加载内容。

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

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

请确认您的彩盒 iframe 的 ID 为 cboxIframe。如果没有，请更新 iframe 选择器

【讨论】：

此事件触发的时间比没有 fastIframe 选项要晚得多。但是 iframe 仍未完成加载。 previewLink 是一个指向 Office Web App 预览链接的链接，该链接由 Office Web App 服务处理以显示预览
我更改了颜色框框架以使用类，因为 id 是动态的。现在我有一个“访问被拒绝”。这一定是跨子域的问题！
是的，这似乎是一个跨域问题：Same-origin policy。一个域中的两个子域是浏览器的两个不同主机...

【解决方案2】：

这是我过去的做法：

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

但是，如果 iframe 在同一个域上，您可以不编写简单的 css 来定位元素。或者您可能没有访问 css 的权限？

【讨论】：

subdomain1.domain.com - 我可以访问这个。我在这里写了简单的 CSS。加载的 iframe 来自我无权访问的 subdomain2.domain.com。
我不确定子域，但这里似乎有更多信息：stackoverflow.com/questions/6046558/…