Apply parent style to page in frame - html

Is there any way to apply the CSS of a parent page to a page within a frame without adding another http request in the page in the frame? Is this possible or would I have to add the CSS via http request in every page loaded in the frame? In the case that it wouldn't work, would it be more convenient to use style tags or link rel if each page were to have a unique CSS? I ask this because they're pages from my site which are only made to contribute to the parent page which has them in frames. The reason for frames being that there is more going on in other areas of the page and everything acts in unison; it'd be convenient not to reload everything for one section.

Set up your cache control headers right and using a <link> will fetch the CSS from the browser cache and not from the server.

No, you would have to put a link element in the iframe's source, which would
1) trigger a new http request
2) it wouldn't work on cross domain websites, because
a) XSS (en.wikipedia.org/wiki/Cross-site_scripting)
b) you would likely not have access to the source to edit it, because it's on a different server.
lists like these are fun. you should try making some of them :)

Related

Maintaining an iFrame with top.window refresh?

This is natural with a frame but not with an iframe. A top.window refresh with an iframe will reload the iframe as well. So use frame right? Well, no. In their infinite wisdom they deprecated it.
So I lose this functionality if I follow the rules?
I have to bring in an outside site and place it in a frame/iframe and it will process everything inside the frame/iframe. The URL, mysite.com has a frame/iframe with example.com by default. Then as the users navigates the content inside the frame/iframe, going to example.com/about.html, and then decides to reload top.window, I don't want it going back to example.com but to stay on example.com/about.
With the deprecated frame this works. With the "proper" iframe, this doesn't work. What can I do?
You can communicate from the child page to the parent on differnt domains through the hash. You do have to have control of both domains in order to do this but it is definetly an option. What you would have to do is everytime the pages changes you update the hash on the iframe with the current url of the content in the iframe.
http://www.shubho.net/2010/08/cross-domain-communication-between.html

Is there any way to request a page without displaying it?

If you link to something downloadable with a simple <a href, the user will download the file while staying on the current page. You can get this behavior with files that the browser has no plugin for (like .bin), or by sending a content-disposition header to force downloading.
Is there any method or header which keeps the user on the current page while still requesting the page? The idea is that the user clicks a link, the request is made, but the page doesn't change—like when downloading a file.
This could be done with an iframe I guess, which is not really pretty and makes another request when loading the page. Javascript is another obvious answer, but that's actually the reason for asking this question: compatibility with JS-less clients.
A form with the method set to HEAD is another ugly solution, but doesn't work anyway. Chromium ignores the method and simply performs a GET request...
Anymore ideas?
You could place an iframe on your page that is hidden. Then, give that iframe and id.
Use this id as the target of a link to the file you want to pull down.
I've created a demo at http://jsfiddle.net/dancrumb/N87nL/ to show you how this would work. Just style the iframe as being invisible and you're good to go
The page will load in the iframe, you'll stay on your page, it doesn't require JS. Oh boy!
Note that the iFrame doesn't have an initial value for src, so no request is made on page load.

Direct preloaded HTML content in iframe rather than src

I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.

stoping iframe from reloading when I change pages

Is there any way for a iframe nested in a div on my page not to reload when I change pages in the nav? Because when I change pages it will load the code of the page and the iframe on the previous page will be reloaded. Is there any way that I can select it and make that it won't reload when I change pages?
If you reload the entire page, the IFRAME element is getting reloaded with it. Unless you used AJAX or a second IFRAME, there is no way to have the whole page except one element reload.
My initial reaction is: "Why the hell would you want to do that, it sounds awful?"
The only way for this to work is to change the page content dynamically, with the exception of the iframe, rather than loading a new page.
But to answer your question, yes you can do it.
If you have all the page content except the iframe inside a div, lets call it #page and the iframe is at the same level in the DOM, or higher, relative to #page, you could use something like jQuery's load() function to load new content for everything inside the #page div.
However, if SEO or Accessibility matter to you at all, you shouldn't do this.
A users browser will cache a lot fo the content in the iframe anyway, so it shouldn't be too demanding to reload it.
If the contents of the IFRAME are simple enough it might be a simple case of using some light query string parameters to indicate the state the IFRAME is in to persist it across pages.
Your options also depend on any development frameworks you might be using (.NET, Ruby, etc.).
Otherwise, additional IFRAMEs seem to be the only other solution.

How to play a background audio across multiple HTML pages.?

Is there a solution to have the background audio/music play across multiple page on a website, WITHOUT restarting on every page load.
The website currently uses a frameset, but I'm looking for an alternative.
Without making the whole site AJAX I think frames are the only way.
Here's a tutorial for making an ajax site if you need it.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
It will give you separate addresses for each page.. sorta.
The only other alternative is to use site-wide AJAX. Each link would dynamically change the page content without navigating away.
Implementing this is time-consuming. Each dynamically loaded page must be stripped of headers and each link must contain a Javascript event that calls an AJAX request.