I'm trying to access in jQuery to the browser width from an iframe inside facebook (app).
The issue is we're not allowed to access to a parent element of an iframe, so I'm trying to get it from a $.post() query where jQuery writes the window with, but since it's a HTTP query, there's no window parameter loaded.
So I'm wondering if we can access to the screen parameter. I mean by this, if there is any browser parameter by default, so I can resize my body page.
For example, if parent.window.width < 500, I want my body width to be set as 500.
Thanks for helping me, I appreciate !
The iFrame domain must match the parent domain to be able to access it directly.
If I remember correctly, Facebook offer a "Fluid" option for the canvas size (which sets the iFrame width to 100%). If Facebook still offer this, you could place your content in a container div and add onLoad and onResize events with jQuery in the iFrame document. You could then set the size of the container based on the iFrame document size.
Related
I am trying to have iframe or object that comes from www.frames.mysite.com/x.html
into other pages in other subdomain or even other websites. but I can't fix up the autofit I did something before and it was fine but now it's not working
function resizeIframe(id){
//id is the iframe innerside box
// #ssbox is the parent of iframe
var heightx=$('#'+id).contents().height(); //box inside iframe height
$('#ssbox').height(heightx); // parent box height
$('#'+id).css('height',heightx)
}
but now its a origin problem, I tried object and i tried lots of other things, is there anyway that i can include a outside page into another page with a dynamic size like facebook comment system or other web plugins.
and is there any other way that i can draw this html page which is dynamic actually into other pages with different data. i have full access to the server apache is there anything i should do in apache/php or anything?
i found a class in javascript to do that but that one kills users RAM as it's reloading the page every 300ms.
i was thinking is there anyways that i can send the height size of the iframe page from iframe page to parent page of that iframe so javascript can fit the size?
and i need this in pure javascript please if possible.
I have a popup div in which I have an iframe. Initially, I have set the height of iframe to some px according to the content in it.
Now, I have a click event on the iframe from which I am redirecting to another view but this view has more content to fit the height. So I want to change the height of the iframe on that event or on the load of other view but I am unable to access the iframe from within that click event of a button.
EasyXDM provides a bunch of useful functions in order to manipulate communication between the client and fetched iframes
Here is an example similar with what you want to achieve.
Keep in mind that you should also control the content into the iframe as well.
Is there a way of resizing an iFrame when the content within changes dimensions, for example
after a javascript effect?
In my example link I have used a Show/Hide Javascript Effect, but the resulting overflow is getting hidden because my iframe can't communicate.
My Website Example (Click Page 2 and you'll see the longer text is hidden)
Thanks
Yes it is possible. It's done by Facebook app for example.
To access the iframe from the main document:
window.frames['iframeName'].document.callAFunction()
window.frames['iframeName'].document.getElementById('foo')
From iframe to parent document:
parent.document.callAFunction()
parent.document.getElementById('foo')
Keep in mind that this only works, if both documents loaded from the same domain.
Now you can do:
Fetch an event if the iframe content changes
Submit the new size into the parent document
The parent document changes the iframes dimension
Enclose the iFrame in a div, assign width and height of iFrame to 100% and control the height/width of the div.
I want to open the iframe's src value in the whole tab/window when I click anywhere on it. How can I do this efficiently and easily? If you are curious, here is the page I am doing it on.
As #Pointy pointed out, you need add a new <div> either before or surrounding / containing (i.e. the parent of) the iframe which links to the src which you given the iframe. The div would have to be the same height & width of the iframe but as long you haven't applied any CSS rules under which this div would fall then it should work it out itself and contract to the needed height & width.
Even accessing the iframe document, you have to use some cross domain hack to be able to attach events to the iframde document.
You can have a look at: http://xkr.us/articles/dom/iframe-document/ to see how you can access the document.
Your best solution, and the simpler is the one suggested by Pointy in the comments. Use a div or transparent image over the iframe and attach the click event to it, grabbing the src attribute via javascript like: document.getElementById('myFrame').src
The bottom line is, from the client side, you will not be able to load the source of an external domain. You could do it through a server side httpclient call, but NOT from the client side.
I just asked a question about why a certain js code won't work in Chrome and Safari 100%, but after more troubleshooting I think I have found out that this is the question I should be posting.
I have a page which has a form in it. This form's target is an iframe on the same page.
The iframe is dynamic, and php based.
This is the bottom of my php iframe content:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
<?php echo $display_table; ?>
As you see, I call a function to resize the iframe's height in the main page (parent page).
This works fine, and it does in fact get resized, BUT, in Chrome and Safari the resize is setting a height "higher" than it should be. So if the height is 500px then Chrome and Safari sets it to around 2000px, which is the maximum of the iframe document height.
Why is this? One thought might be that the body isn't fully loaded before the scrollHeight is being sent to the resize function maybe?
Is there any way of making it wait until the document is fully loaded?
One thing that confuses me is that when I click a link on the main page, and then hit back, the page resize works good, and is set to 500px as it should be even in Chrome/Safari. But that's when I hit "back" in the browser.
Hmmm, I really don't understand this, so please help me out here.
Thanks
document.body.scrollHeight will always return one of two values in chrome:
if the document content is longer then the height of the window, then the height of the content is returned
if the document is shorter then the height of the window, then the height of the window is returned.
It sounds alot like you have a height set on the iframe. When the content in the iframe loads, it will treat the iframe as the window. So, if the iframe's height is set to 2000 and your content's height is only 500, chrome will return an offsetheight of 2000.
If this is the case, the simplest thing to do is set the height of the iframe to 1px. (or auto)
Another option (as pointy um..points out) is that you could create a wrapper div right after the body that contains all of your content. You can then just get the height of that div and return that to your parent function
Regarding this question:
Is there any way of making it wait
until the document is fully loaded?
The answer is yes, and your already doing it. Since your calling parent.resize_iframe on onload, the function will not get called till all of the HTML, JS, CSS and images are loaded on the screen. However it should be pointed out there are a few draw backs to using the body tags onload function. One, is it has to load all the images before it calls onload. Secondly, if someone rebinds to window.onload your function will never get called. If your interested in learning more about onload and ways to deal with it, check this link out http://www.webreference.com/programming/javascript/onloads/