Right now, I have a jQuery UI pop-up dialog that reads from an external page. This page reads from another external that has a video via flowplayer.
I'm using iframe to embed the video in the first:
<div id="donkeyVideo">
<iframe id="iframeDonkey" width="100%" height="496" src="../../../../video/donkey-2009-02-23.html" frameBorder="0"></iframe>
</div>
The width seems all right with 100%, but 100% height doesn't work. Is there a way around this?
Where and how do I embed the code, as well as the ID stuff. Please anyone, help?
You'll have to use some sort of JavaScript to dynamically adjust the height of an iframe if you want to use something like 100% rather than a pixel value.
Unfortunately, my understanding is that you cannot dynamically alter the height of an iframe that is pointing to a different domain than your own.
From lost-in-code:
jQuery : Auto iFrame Height
Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.
if you don't want to use a jquery plugin, you can do it simply using the method I've explained on my facebook post (https://www.facebook.com/antimatterstudios/posts/10151007211674364)
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
Related
It has come to my attention that if you turn off Javascript, on Google Chrome(at least), the text <iframe> and its attributes are visible when Javascript is turned off and leave an odd appearance on the page.
You can test this on sites that use it. For example. turn JS off to see
Is this a bug? Is it considered a type of script, and should it be wrapped with "noscript"?
I'm sure companies that use iframes are unaware, I've noticed it on some Google pages too, there must be someway to get around it.
i'm working with iframes but i'm not aware about this problem, but here is a hint if it helps.
You can start the page with iframe hidden:
<iframe style="display:none;"></iframe>
and once page load you can show them, then if javascript is enabled this line will run and will show them otherwise will kept hidden:
$("iframe").show(); //jQuery
document.getElementsByTagName('iframe').style.display = 'block'; //Pure Javascript
I have an external page that I want to embed within my page- it has it's own scripts and CSS that I don't want to conflict with mine. Normally I'd just use an <iframe> and be done with it, but this is a mobile optimised site, and I want to avoid extra HTTP calls wherever possible. So, I want to run the request on the server side and embed the resulting HTML within my page, so that the client never has to be make it's own request.
I can do that by doing something like:
<iframe id="test"></iframe>
<script>
var doc = $("#test")[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
</script>
But I'd rather do this without using JavaScript at all. Is that possible? Any content I put between the <iframe> and </iframe> tags gets ignored, as it is used for compatibility reasons with browsers that do not support iframes.
Why not just use a <div>? Optionally, set a fixed width and height and add overflow:auto to its CSS.
Eventually you should be able to use the srcdoc attribute on the iframe. But, it currently is not widely supported. In the meantime your only options are javascript or just having the browser make the call with the traditional src attribute. You might look here, as I believe this stackoverflow question is quite relevant.
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.
I have several HTML pages that share a menu area. Every time I update the menu area (eg with new "breaking news") I need to update all 10 pages manually.
With frames, they all point to same frame page so I only need to change one page. But I was told frames are bad and I should use divs. Is there a simple way to do this with divs? (preferably without JQuery or Ajax)
You could use an iframe. It still is sort of a frame, but you would avoid a frameset-index-page and if you set borders to 0 and content that fits in you won't even see borders or scroll-bars and it will behave like a div
<iframe style="border-width:0px;" src="news.html"/>
You should use fixed width-heights though to avoid scrollbars. To me its the simplest "html-only"-solution to your problem.
You could use jQuery's load() function.
You'd have to add the following to the head of each of your pages:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Then you'd have to add the following DIV where you want the content to be loaded.
<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>
Be sure to edit the link to the news.js file.
Then you'd create the news.js on your server, and add the following code:
$('#breakingNews').load('path/to/breakingnews.html');
More about load():
http://api.jquery.com/load/
Not the nice solution, but if you really want to have single point of menu definition, include it in the script which includes setMenu function and you load the script in every page's head and call a setMenu function on every page's body onload, which then sets the menu as innerHTML of the div that you include in every page specifically as a menu placeholder.
Client side templating may be a solution if you are trying to avoid server side solutions for dynamically generating your content.
Using ICanHaz.js templating, http://icanhazjs.com/, you could store your html as objects. Then either include them directly as .js files, or make ajax requests for them.
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.