在 iframe 上隐藏动态元素

Posted 2023-05-09

【中文标题】在 iframe 上隐藏动态元素

【英文标题】：Hide dynamic element on 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");

【参考方案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。

我不确定子域，但这里似乎有更多信息：***.com/questions/6046558/…