how to properly display SSRS site within iframe - asp.net

I have been working on a project where I need to load a ssrs site within an iframe. The iframe is acutally using the telerik spitter panels but the DOM refers to it as an iframe when rendered. The issue I am coming into is when referencing the SSRS site it loads wihtin the iframe but the view tiled multiple times over. In reading I have seen mention that the SSRS site also uses iframes which causes an issue when loaded into another iframe. Does anyone know of a solution for this type of scenario or can you point me in the right direction of where to look? In essence I have to wrap an asp.net wrapper around the SSRS site as it is a part of a larger site and users need to be able to navigate to this section of the site using the main navigation. I need to avoid pop-up windows or redirects as the user needs to get the expereince that they are in the same site even though I am loading ssrs from another server. Attached is a screen shot of what the tiling looks like. The site is small so I am not using masterpages it is loaded directly within an asp.net document.
Any tips or suggestions are always appreciated. Thank you

from experience I've found IFRAMEs and FRAMEs with SSRS 2008 did not work reliably (admittedly I had IE6 issues too).
Eventually I settled on using JavaScript/jQuery to create a DIV at the top of the page that looked like the top nav bar of my home page, using behaviors (IE) or bindings (FF) that can be loaded in using the "ReportingServices" style sheet e.g.
/* add in behavior file for IE */
body {
behavior: url("/Reports/IE-frame.htc");
}
/* Firefox-only XBL */
body {
-moz-binding: url("/Reports/FF-frame.xml#initFrame");
}

Related

Prevent Internet Explorer from grabbing focus

I've been stumped on this problem for a week. After consulting various questions and failing to find a resolution I decided to finally ask here.
Project Info: Using ASP Net and Visual Studio.
Element causing issue: iframe being loaded from Microsoft Power BI
Issue: when I open my webpage in Internet Explorer or Firefox, the iframe will grab focus (I think this is focus) and force the page down to the iframe after loading.
Possible resolution 1: prevent the iframe from ever grabbing focus.
Possible resolution 2: implement a lazy load system so the iframe doesn't load until the user scrolls to it. This would also be satisfactory.
Background: We are using ASP Net Master and child pages. The issue occurs on a child page. So any advise on where to place a script with solution would be helpful as well.
This is a common issue with Power BI embedded. For example, if you visit the official Microsoft blog where they have embedded an iframe, the "jump" will occur if you open this link in Internet Explorer: https://powerbi.microsoft.com/en-us/blog/announcing-power-bi-publish-to-web/
Here's what the embedded code looks like:
<iframe width="455" height="345" src="https://app.powerbi.com/view?r=eyJrIjoiOTAzYzU2NGUtNzc0Ny00NTU4LWJmNWMtNjJhMWJiOTcwMjdiIiwidCI6ImY4NTA5NjYwLWNiMTMtNGU2Yy1hYzhjLWNlZWNjZDIzNzkyYSIsImMiOjZ9"></iframe>
I have been so stumped on this. Any advice would be so appreciated!

web pages stop rendering after iFrame loads

We have a web page in our solution that uses an iFrame to display a vendor's web page. Usually when a user navigates away from this page that hosts the iFrame, all the other pages render just fine. The vendor just redesigned the content of their page, however, and while their new page looks fine in the iFrame and that hosting page works fine too, any time a user navigates away from the hosting page, the page being redirected ~to~ does not render properly. It's just completely blank. An f5 will get it back, but I'm wondering what I can do to fix this. The vendor says it's not their problem, but that's the only thing that changed. I've tried both redirecting the iFrame to blank and removing it outright via javascript (see below), and while I can see the iFrame disappear just before the redirect, the redirected to page still will not render without hitting f5.
window.onbeforeunload = function ()
{
document.getElementById('<%= ifr.ClientID %>').src = "about:blank"
$("#<%= ifr.ClientID %>").remove();
}
Can anyone give a suggestion of why this is happening and how to prevent it?
TIA
-VG
I've had a similar problem when using an iFrame containing a page from our payment card processor embedded in our eCommerce pages. I couldn't see anything in the source of the iFrame that might be causing the problem, so I opened up space for the iFrame, contained it in a div (my last element on the page) and used position to render the iFrame in the position I wanted it. Hardly responsive design, but it worked!
For anyone coming to this from the first Google result, this can be caused by your iframe being self-closed (ending with />). To fix it you just need to close the iframe with </iframe> instead. This may not be the original problem but it worked for me.

Mobile website in HTML5 not pulling CSS file until refreshed

I'm building a contact form for a mobile website in HTML5 and CSS. It is the same form I use on all mobile website and after not working for 5 hours I pulled the code straight from a working site I built and it still doesn't work properly.
The issue is when you go to the contact page it shows the contact form, but with the labels centered and the submit button image isn't showing up. I must refresh for it to bring up the correct CSS file to align the text left and show the submit button. Initially I thought it was from a CSS/JS conflict with my menu at the top so I pulled that and it still causes the same problem. I have cleared the cashe on my phone and web browsers and they all work the same.
Here is the link: www.lpokc.org/mobi/contact.php after going to this page hit refresh and you will see the difference.
My question is, is this a caching issue, is it server side issue, or is it a conflict in my coding. I'm not good with posting the code on this site but if you go to the mobile site from your web browser you can just right click and view source to see my code. I have a boiler plate html core file with boiler plate CSS and custom CSS.
Is there some sort of script I could use to make this page auto refresh one time on page load then not again after the reload? I don't want to use an improper fix like this but I have been working on this issue for a day.
The left side is before refresh. I have pulled the code from the site now but I think it was a js conflict because it was auto loading the css from the menu when the link for any page was clicked.
I'm seeing it fine on my end. Seems to work flawlessly, but if you are still having a problem, you could either use cookie or session variables. If the variable does not exist, you can use the php function header( 'Location: http://www.lpokc.org/mobi/contact.php' ) ; to "refresh" the page. It's actually just a redirect command, but if you are sending them back to the page they are on, it is pretty much the same thing as a refresh.
It was a conflicting issue with my menu JS/CSS. I pulled it and now everything works fine.

Crystal report is making the menu for master page disappear

For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.

asp.net page not fully loading in IE6 from iframe

I have two iframes on a page, one of which displays a simple asp.net page, the other is used to display office documents, normally in the browser using an active x control.
This all works fine unless I 1: run on IE6 SP3 & 2: disable the activeX control and allow the document to be shown natively by the client (i.e in word etc.). When this happens the document is displayed with no issues, however the other iframe is either blank or just displaying the background image.
Using fiddler I can see that all content has come down so the troublesome iframe should render correctly, however when I view its' source all I get is the top part of the content, down as far as
var theForm = document.f
Does anyone have any ideas ???

Resources