在iframe上隐藏动态元素

我有一个使用colorbox加载iframe（专有信息）的页面。在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>

来源

2015-04-20 Ranjith Venkatesh

您是否尝试过使用纯CSS？ – Aaron

页面是否在当前域中？如果不是，那么你不能在'iframe' [同源策略]中定位元素（https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy） –

页面处于相同域但不同的子域 –

你的颜色框采用的是动态网址的内容。在查找元素之前，您必须确定内容已加载。

你只需要在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选择

来源

2015-04-20 09:21:09 jmgross

此事件比没有fastIframe选项晚触发。但是，iframe仍未完成加载。 previewLink是通过Office Web App服务处理的Office Web App预览链接的链接，用于显示预览 –

由于ID是动态的，因此我将colorbox框架更改为使用该类。现在我有一个“访问被拒绝”。这必须是跨子域问题！ –

是的，它似乎是一个跨域问题：[同源策略]（https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy）。来自域的两个子域是浏览器的两个不同的主机... – jmgross

这是我在过去做了它的方式：

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

但是，如果iframe是在同一个领域，你能不能写简单的CSS定位的元素。或者，也许你没有访问CSS？

来源

2015-04-20 09:29:08 lharby

subdomain1.domain.com - 我有权访问这个。我在这里写了简单的CSS。加载的iframe来自我无法访问的subdomain2.domain.com。 –

我不确定子域名，但似乎有更多的信息在这里：http://stackoverflow.com/questions/6046558/cross-sub-domain-iframes-and-javascript – lharby

在iframe上隐藏动态元素

回答

相关问题