I have one solution with web forms approach (soln1) and the other one in MVC 2.0 (soln2). On a page page1.aspx in soln1, I want to render soln2. I used iFrame and in src atribute, I provided starting URL of soln2. Is there any other approach to this? Basically I dont want to use iFrame because of some styling issues.
Thanks
There are three ways (that I can think of) to load one webpage inside another:
IFrame
jquery.load
Frames
Unfortunately all of these options have their problems.
IFrame's can have styling issues as you know.
JQuery's load has compatibility problems with some browsers and an issue with event bubbling.
Frames demands a static layout to your site and probably has the same styling issue for you.
Considering those problems, an IFrame is probably the best choice, it's also specifically intended for the kind of behaviour you're trying to achieve.
Why don't you post about your styling problems, as that might be the easier thing to solve.
Update:
To fix the scroll bars, you can add this attribute to your iframe
scrolling="no"
For an example see here:
http://jsfiddle.net/FZ4eZ/
Related
Using a content script, I plan to insert a UI into the page in an <iframe>, but I have a few concerns.
Do people commonly use settings/extensions to block iframes on the page?
If my extension's iframe is blocked, is there a way for me to detect this?
Any other reasons to avoid the use of iframes in this scenario?
There are similar questions on the site, but they don't specifically ask what I want to know.
[The reason I want to use an iframe is this: My extension has to run independently of the website loaded (i.e. on any webpage). Its content script needs to show a UI for settings/help etc. Currently it does so by inserting a div into the page's DOM. However CSS from the webpage gets applied to the extension's UI, something which is harder to fix than one would think. Using an <iframe> seems to a way to avoid this issue.]
As you've discovered, trying to sandbox your CSS from interference, when injecting into the DOM is very difficult without declaratively setting every known style attribute. It's a well documented problem and some solutions can be found in the following posts:
How do I prevent CSS interference in an injected piece of HTML?
Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?
There's nothing fundamentally wrong with dropping your UI it into an <iframe>. I'm not aware of any settings or extension that would block this behaviour.
If your framed UI needs to interact with the DOM on the parent page or a content script you can do so with the use of Window.Parent. Also you may need to consider Same-Origin Policy if your pulling in the UI from another domain.
Answers in order:
People do not commonly use settings/extensions to block iFrames. Rather the opposite; the biggest complaint is how to get content out of iframes placed by ISP's and leach/wrapper sites, etc.
Yes, you can detect if your iFrame is blocked by having your iFrame's JS send an "I've started" message. If the message is not detected, assume the worst. :)
No reasons to avoid iFrames, other than they are a bit of a PITA to work with. If you just need to "show a UI for settings/help etc.", then it might be better to have your extension just open one of the popup window types available to extensions. You control the HTML/CSS/JS of those completely without worry of interference by the page.
I am developing a chrome extension that is meant to work on all web pages. As part of its functionality, it needs to show a UI on any given page.
Currently, to do this, I append a div (containing the UI HTML) to the page from the content script. The issue with this is that the styles of the containing page get applied to the extension's UI, causing it to look different on different webpages.
Two approaches to fixing this issue:
Apply specific styles (marked as !important) for the extension's UI elements. This is really hard because depending on the page, any attribute of any element can have a different value.
Add this UI to an iframe, and insert that to the page. This of course, fixes the CSS issues with approach 1. But I haven't worked much with iframes in the context of extensions before and I'm wondering if there are any concerns that I should be aware of.
Some of the potential issues that come to mind:
1. There can be complexities in the content script interacting with the iframe js.
2. Some users might have iframes disabled at the browser level for specific or all sites?
Generally, the use of iframes is frowned upon, for reasons of security and performance (among others). I am wondering if in this scenario, using an iframe is the most sensible option?
Also, I intend to port the extension to Firefox later. This is probably not relevant, but just putting it out there in case it helps tilt the decision.
I understand that frames are a lot more typing work to implement than Iframes, and that they require a lot more styling than Iframes. I am currently working on a website which must download some content (in fact, an entire set of webpages) from another website, one - by - one of course depending on the user's action on the main website. Iframes seem to be a short and rowdy way to implement this requirement, but what I am worried about is performance and integrity.
I would like some advice on what I would rather use when the following criteria is met:
The pages that must be downloaded onto my webpage are quite large (width and height)
Contains multiple images
Experiences occasional downtimes (maintainence)
any ideas for a man in wonder?
At this point, go with iFrames:
iFrame is HTML5. Frameset is obsolete in HTML5.
You have to load pages into each Frameset. iFrames can be embedded anywhere in a document.
You can style, hide, resize either, but iFrames are much easier to work with in this regard.
I've seen cases where the developer went with Frameset because he couldn't get the iFrame to size properly, but this isn't too big a deal with a little Javascript (if even that). The only reason to use a Frameset is if you don't fear it's eventual deprecation with modern browsers, and/or if you can't get iFrames to size the way you want based on the content you're integrating and need a quick solution.
If this is about display of 3rd party data in your site, you could use data feeds from the other sites if they're available, or use a screen scraper to extract the information you need, then display it in your own way on the page.
Unless it needs to look exactly like to other page.
Check out this link on screen scraping for ASP.NET
Is there any problem with using jquery layout plugin (there are several) to layout a page as opposed to using CSS and fixing browser compatibility issues myself?
Another problem is that the page has to fully load and download the javascript, then get rendered. This will slow down the page significantly.
The most obvious problem is that any visitor to the page using a browser with JavaScript turned off will not get the layout. If you're willing to turn away from those people, that may not be a blocking factor for you.
There can also be performance issues, delays on resizing the browser window, that sort of thing.
I'm not saying don't do it; if it's appropriate for your target audience. But look to see if you can avoid it or at least gracefully degrade if JavaScript isn't enabled. (Turn off JavaScript and come here to SO, for instance; still very usable in a read-only way.)
If doing this, continue to be sure to mark up your content in the main page (rather than only adding it dynamically) and use the most semantic markup you can, to improve your search-ability.
When your layout doesn't behave for whatever reason (and that will happen), will you be able to understand the code behind the JQuery plugin to fix it?
Invest in yourself and learn CSS properly, it's not hard, it doesn't take long and it will equip you for the future, don't just rely on plugins. Now I'm not saying never use a plug-in, but this to me seems inappropriate use
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.