I have an ASP.net 4.0 site. Users can save an entire html page into the backend database. What I want to do is load the dynamic content into a div on an existing page in a content area and have a couple of things to happen:
I do not want any of the css to affect anything outside the div, when first trying this out loading of some badly formed html would move images and other divs outside the content area around.
A lot of these html pages use the "base" tag for images and links, I want the base tag respected inside the div.
I have a solution that I am going to try which is just to use an iframe and set its url to another child page that loads the dynamic html into its own page entirely. I am just wondering if there is a better solution.
As per my comment, if you're storing the entire HTML of the page in question (including <!DOCTYPE>, <head>, <body> etc) then yes, using an iFrame is (in my opinion) the best option.
It is almost impossible to stop inherited styling of the "parent page" from affecting "injected" HTML.
The main downside to this, however, is that you have little control over making sure the HTML in the iFrame is displayed at the correct size. One option would be to use client-side javacript (or jQuery) to work out of the rendered size of the HTML and adjust the iFrame controls height/width accordingly... but I think you might have trouble getting this to work effectively.
Related
I am building an autoresponder for my own website. I thought to put it inside an iframe to decouple it's style from the theme style (i'm on wordpress), but this gives me two collateral effects.
The first one is that the iframe is not much friendly with the responsiveness, and I'm trying to address it's behaviour to always show the content of the autoresponder.
the second one is that the form inside the iframe has a "thank you" page after the submit, but with the iframe the thank you page will open inside the iframe.
There is a way to open the thank you page on the host page? Am I doing this the right way? there is maybe a better way to insert a piece of web page in a way that stay indipendent from the theme around it?
I wouldn't use an iframe to de-couple styling to be honest, they can prove far more trouble than they are worth.
I would just override any theme styles I didn't want with CSS targeted at the component. It sounds a lot more involved than it actually would be and you'd have better control over the responsive layout of the component.
So I seem to have found myself in a bit of pickle. In order to keep a header flash element from reloading every time someone goes to a different page, I encapsulated all my site's content in an iframe. Unfortunately, some of the iframe's include thickbox, which opens an iframe of it's own. The iframe that thickbox opens, requires it be opened on the topmost page, so that the fixed attribute allows the iframe to remain static in the viewport. Because we're already nested into an iframe, this isn't possible.
This is the most promising lead I have so far:
http://blog.codepyro.com/2010/01/thickbox-inside-of-thickbox-iframe.html
Unfortunately, that only replaces the iframe that the thickbox is being opened from, with the content of the thickbox.
I also just came across this, but I'm not sure how I would go about retooling it to suit my needs:
open iframe fancybox from within an iframe so that it opens in the parent
Here is a link to what I'm working on:
http://www.lalalandmusicfestival.com/site/
The problem area is on the Talent page.
I think if there was a way to force the link to target the "top" or "parent" page with javascript, it may be possible, but I haven't found anything that's been of any use to me yet.
Thanks in advance for your help!
I'm new to chrome extensions development and I'm building one that requires a side panel (not the popup), like firebug but on the right side.
I'm using jsTree (with json_data) in the side panel and I want to drag elements from the webpage to the side panel.
So far, to create the side panel, I've used a div appended to the body with a z-index so that it appears above the webpage, but the elements' styles in my side panel are altered because of the website's css.
So I thought I could use an iframe to avoid any css incompatibility within my side panel.
I create the iframe dynamically, with a src="chrome-extension:///page.html".
I've managed to make my jstree work fine in my iframe by loading the jquery+jstree scripts directly in the iframe's source page... that's pretty bad but I can't get the content script to be used for the iframe's source page (despite "all_frames": true).
I'd like to drag elements from the website's page into jstree in the iframe...
I've found the iframeFix: true and refreshPositions: true, but that doesn't seem to change anything...
Anyone knows how to do that?
If I don't use an iframe, according to the multiple examples on the web, I can easily drop an element to the jstree using the dnd plugin.
I haven't tried it; even if it worked, the css in my side panel will be altered and I can't let that happen.
I've seen the "div layer above the iframe" technique. I can successfully drop an element from the webpage on that div above the iframe.
But, when I try to post a message (containing the dropped elements' data) to the iframe through a port the iframe doesn't receive the message.
My idea in this case is to somehow add the message to the json data of jstree.
I've read all the posts I've found about content_scripts and iframe, I know about the bugs... I can't figure out if it's fixed or not, and if it is, I don't know how to make the port communication between the ifram and the content script work.
Anyone knows more about that?
I should also add that when I try to communicate between the content script and the iframe using a port, and copy the listener from the iframe in the background page, the background page receives the message just fine... which just means that the port communication is working fine I suppose, but not between the content script and the iframe...
Any thoughts? I'm really stuck
answering my own question;
I haven't found a solution on how to use iframes in a chrome-extension with jstree.
I'm just going for the hardcore way; append a <div> to the <body>, and make sure by doing a lot of testing that the css inside my <div> will remain isolated from the webpage's css.
Cheers
I am a newbie at this web stuff and am stuck trying to figure out how to strip the headers, footers and side navigation from a document that is being used as the source for the iframe. I have a document page that is displayed in an iframe, but it is displaying everything like the navigation sidebars and the header and footer. Unfortunately, this document page by itself needs the navigation stuff on the top and side, but when displayed in the iframe, it will confuse the user as the unwanted stuff is duplicated with the parent page. So.... How do I remove the side navigation, header and footer?
I am using asp.net. The document is being set in the code behind using attributes (i.e. iframe.Attributes.Add("src", "index.aspx")). So I need to strip out the unwanted stuff before loading it into the iframe and cannot seem to find any methods of achieving this, nor can I find any references on the internet. Please help!
You have to implement a iframe (print in the article given) stylesheet as per http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm.
Then when you are calling from ASP.net, you can open the page with the new CSS.
Hope this helps.
Please don't poke me for using IE6 but that's a client's requirement.
My question is, I have an EMBED tag that displays a PDF dynamically depending on the user choice which means the first time the page gets rendered there won't be any EMBED tags but will be when the user picks a choice.
The problem seems to be that when the EMBED tag is flushed to the client side either the container DIV is not expanding enough to accommodate the EMBED tag or the EMBED tag is getting lost somewhere (as if).
On Firefox the EMBED does show-up (even though it's not the desired size) but on IE6 the EMBED is not visible at all (even though it's in the page source). I tried the container DIV to a fixed height (1200px) but didn't help.
The DOM hierarchy is something of,
container DIV
contains another container DIV that set to float
EMDED tag is within the floated container
Do you see any obvious issues with this model?
Greatly appreciated your help.
Note: It's an ASP.NET app (I don't know if it matters given the messy control ID's it create automatically)
IE does not support <embed> at all. You have to use an <object> to embed plugins for IE. As usual there are issues with embedding markup, but I think this would be a place to start:
<object type="application/pdf" data="something.pdf" width="(x)" height="(y)">
<param name="src" value="something.pdf">
</object>
But I'd advise against trying to embed PDF. Some people (including myself) absolutely hate reading a PDF squashed inside the browser. It also requires the user to have a PDF plugin, which is another potentially-insecure piece of net-facing code; PDF reader exploits have been one of the most widespread web attacks over the past year.
Providing a plain PDF link in addition to or instead of the embed will allow you to reach more users, and let them decide themselves whether to download or view the PDF in the browser.