2

I have a page which uses colorbox to load an iframe(proprietary information).

I need to hide an element in the iframe(takes a few seconds to load) with a specific class.

I tried this with no success. The console messages are not hit. One they are hit, I can then hide them using 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
        }
    });

}

Plain CSS approach(did not work either):

<style>
        .className .UITextTranformUpperCase {
            display: none;
        } 
    </style>
Ranjith Venkatesh
  • 1,322
  • 3
  • 20
  • 57

2 Answers2

0

Your colorbox uses a dynamic url for content. You have to be sure that the content is loaded before finding elements.

You just have to set the fastIframe property to false and add an onComplete handler and it should work :

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

Please just verify that your colorbox iframe has the id cboxIframe. If not, update the iframe selector

jmgross
  • 2,306
  • 1
  • 20
  • 24
  • This event triggered much later than without the fastIframe option. However the iframe was still not completed loaded. The previewLink is a link to a Office Web App preview link which is processed by an Office Web App service to show a preview – Ranjith Venkatesh Apr 20 '15 at 09:30
  • I changed the colorbox frame to use the class as the id is dynamic. Now I have a "Access is denied". This must be a cross sub-domain issue! – Ranjith Venkatesh Apr 20 '15 at 09:42
  • Yes it seems to be a cross domain issue : [Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). Two sub domains from a domain are two different hosts for the browser... – jmgross Apr 20 '15 at 10:02
0

This is the way I have done it in the past: 

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

However if the iframe is on the same domain, can you not write simple css to target the element. Or maybe you do not have access to the css?

lharby
  • 3,057
  • 5
  • 24
  • 56
  • subdomain1.domain.com - I have access to this. I wrote simple CSS here. The iframe which is loaded is from subdomain2.domain.com to which I do not have access. – Ranjith Venkatesh Apr 20 '15 at 09:33
  • I wasn't sure about subdomains, but there seems to be more information here: http://stackoverflow.com/questions/6046558/cross-sub-domain-iframes-and-javascript – lharby Apr 20 '15 at 09:36