How Can I Embed a Dashboard in Visualforce?

Question

I'm embedding a dashboard in a visualforce page using an iframe:

<iframe src="/01ZJ00000007JGa?isdtp=vw"/>

When I try to click on any component to load the underlying report, I get this javascript error:

Uncaught TypeError: Cannot read property 'Listener' of undefined   iframeinterface.js:1
Sfdc.xdomain.IframeInterface.handleOnload                          iframeinterface.js:1
window.onload                                                      crossDomainProxy.html:6

The affected file is served from <SFHOST>/xdomain/iframeinterface.js and the specific line that's causing the error is:

("sfdc-console" === b ? top : 
    "undefined" !== typeof a.targetParentFrame ? 
         parent.frames[a.targetParentFrame].frames[b] : 
             parent.frames[b]
).Sfdc.xdomain.Listener.accept(a)

Any thoughts about what's going wrong and how I can fix it?

UPDATE

I was able to accomplish what I need to with the following hack described in this answer, made possible by the fact that I'm on the same domain. But I'll leave the question open, looking for a more thorough explanation and non-hackish way to embed a dashboard in Visualforce.

Answer 1

Loading the Dashboard with isdtp removes the header and sidebar, but isn't officially supported. When you do this, SFDC replaces all the links with a call to the srcUp() function, which doesn't work in this context.

To get around that, add the following script to your VF page to change the links back:

<apex:page>

<script>
jQuery( function ($) {

     $('#iframeID').load( function() {              
         var $frameDoc = this.contentWindow.document,
             urlMatch = /srcUp\(%27(.*)%27\)/;

         $('a[href*="srcUp"]', $frameDoc).each( function () {
             this.href = decodeURIComponent(this.href.match(urlMatch)[1]);
         });
     });

});
</script>

<!-- the rest of your page goes here -->

<iframe id="iframeID" src="/01ZJ00000007JGa?isdtp=vw"/>