remove elements within an iframe

Question

I have a VF page that embeds a dashboard inside of an iframe. I'm not sure this is possible, but I am trying to use JQuery to hide a few elements in the dashboard page. So, I was trying this:

<apex:includeScript value="{!URLFOR($Resource.JQuery, '/js/jquery-1.11.0.min.js')}" /> 
<script type="text/javascript"> 
    var j$ = jQuery.noConflict();

    j$(document).ready(function() {
        var f=j$("#iFrame");
        f.load(function() {
            f.contents().find(".viewHeaderValue").hide();
        });
    });        
</script>

Initially, I didn't think this would be a cross domain scripting issue because the dashboard and the VF are within the same salesfore environment, but now, I'm wondering if cross domain scripting is the problem.

My VF page with the iframe has a domain of: https://c.na11.visual.force.com/apex/myVFpage

The domain of the dashboard which is in the same org that I'm embedding into the VF page has the following domain: https://na11.salesforce.com/

Is this a cross domain scripting issue?

Thanks.

Answer 1

The code you posted is fine, that is to say it contains no obvious mistakes or typos and works as expected when the two iframes are on the same domain.

I therefore conclude that either a) it is a cross domain scripting issue, or b) another factor is at play.

Chrome always complains when you violate the same origin policy, so why not open your page in Chrome and have a look at what your console is saying.