在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上隱藏動態元素

回答

相關問題