I have a SSRS report that has a hyperlink to another website. The link to the site works fine when I access the report directly. However, I am displaying the report in an iFrame. When I click on the link within the iFrame, nothing is happening. I can copy my link, paste it into another window and I am able to see the link work.

Here is my link:

=iif(Fields!budgetid.Value>1,"javascript:void(window.open('"+"" & Fields!budgetid.Value & "'))","")

code for my iFrame:
<iframe name='myIframe' id='myIframe' src='' height='650' width='100%' scrolling='auto' frameborder='0' ></iframe>

I've gone over the javascript syntax and I know that this is working for me. It just feel that maybe the iFrame is somehow "blocking" the link from working? I have seen the Sandbox attribute that was added, however that looks like it is only supported in IE10 and up, and we are below that. Thoughts? Thanks for the help.

jamey8420

Dani AI

Generated

Summary of the likely causes and practical fixes for the behavior described by (link shows hover inside the SSRS-rendered iframe but a click does nothing). @LastMitch was correct that this is a JavaScript/URL action issue rather than a CSS problem.

Key points to check

  • Inspect the rendered anchor with browser devtools and read the actual href attribute. A malformed expression that injects HTML into the URL string will produce a broken/malformed href (nested tags or unexpected characters) and browsers will ignore the click.
  • Watch the JavaScript console for an exception raised on click; a script error will stop any subsequent window.open.
  • Test whether a popup blocker is preventing the open: middle-click or Ctrl+click behavior vs programmatic open will differ.
  • Confirm same-origin vs cross-origin between the parent page and the iframe. If same-origin, the parent page can safely alter link targets; if cross-origin, the parent cannot touch the iframe DOM.

Workarounds and solutions

  • The most robust option is to have the report produce a clean destination URL (a plain absolute http(s) link) rather than embedding HTML or extra markup in the string. That avoids renderer sanitization and malformed hrefs.

  • If changing the report output is not possible and both pages share the same origin, the parent page can set link targets inside the iframe after it loads so links open in a new tab/window. Example (parent page):

    <script>
    document.getElementById('myIframe').addEventListener('load', function() {
      var doc = this.contentDocument || this.contentWindow.document;
      Array.prototype.forEach.call(doc.getElementsByTagName('a'), function(a){
        if (a.href && a.href.indexOf('/forms/') !== -1) a.target = '_blank';
      });
    });
    </script>
  • If the iframe is cross-origin, use a same-origin redirect endpoint (a tiny server page on the parent origin) as the report link target; that page then redirects to the real URL, which avoids cross-origin DOM access and reduces popup-block risk.

Cautions

  • Avoid injecting HTML markup into the URL string; build only the destination URL. Popup blockers will still block programmatic opens in some browsers unless directly triggered by a user gesture. These checks usually reveal whether the issue is malformed output, a blocked popup, or an origin restriction.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

I've gone over the javascript syntax and I know that this is working for me. It just feel that maybe the iFrame is somehow "blocking" the link from working? I have seen the Sandbox attribute that was added, however that looks like it is only supported in IE10 and up, and we are below that. Thoughts? Thanks for the help.

What does it has to do with html & css? The issue you have is more related to javascript than css. I'm look at this issue on here:

=iif(Fields!budgetid.Value>1,"javascript:void(window.open('"+"" & Fields!budgetid.Value & "'))","")

You never mention anything about how to open the link? is it in the a parent or child?

or another words you want open in the iFrame or within the iFrame?

Is javascript not displaying the link?

Are you trying to display data from the database through the iFrame?

If you had post this issue in javascript I would explain in the javascript but since you post this in CSS I'll only mention CSS:

There's nothing wrong with this code here:

<iframe name='myIframe' id='myIframe' src='' height='650' width='100%' scrolling='auto' frameborder='0' ></iframe>

It might be related to the base:

http://reference.sitepoint.com/html/base

LastMitch,
Thank you for your thoughts. To clarify what I'm doing:

I have a SSRS report that is rendered within an iFrame. The SSRS has a link to another website on it (the link above) which I would like to open in a new window (not in the existing iFrame). The link is within one of the columns of the report, and would be activated when I click on it. The javascript is displaying the link (when I hover over that column, the little hand pops up.) But when I click on the link, nothing happens. If I right click, copy the shortcut and paste into a new browser window, the link works.

That is why I had posted within the HTML. Upon my reading, I found some information about iFrames not allowing scripts to be run (the sandbox attribute that was added for HTML 5 seems to solve that problem). However, on browers that are not combatible with HTML 5 is there any work-around?

jamey8420

Member Avatar for Member #949455

That is why I had posted within the HTML. Upon my reading, I found some information about iFrames not allowing scripts to be run (the sandbox attribute that was added for HTML 5 seems to solve that problem). However, on browers that are not combatible with HTML 5 is there any work-around?

Well, I'm not going to post anything since you open an new thread here:

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/453652/window.open-from-iframe-doesnt-appear-to-work

In the future, try not to open 2 threads with the same issue and it's also rude if someone is trying to help you already.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.