I need to find out the height of the web pages that go in my iframe. Those pages are out of my control and there is no way I can place code in them. I guess I could add a proxy function to my server but I'd rather avoid that if at all possible because bandwidth.
Is there any way to do this?
If you're just trying to stretch your iframe to match your embedded content, try looking at Make iframe automatically adjust height according to the contents without using scrollbar?
That being said, this will NOT work for cross-domain iframes due to Same Origin Policy
Related
I have an iframe.
I want to prevent access from the parent document into the iframe from css selectors and other manipulation.
How can I secure it?
You could kill a goat under the light of a full moon inside a pentagram made of salt. If you did that, css or js wouldn't be able to affect the contents of an iframe.
They wouldn't affect them if you didn't either.
You have to explicitly allow sites to interact with the contents of an iframe, either by setting up an api like this, or by setting up cors headers to allow interaction. According to other answers on this site, if the iframe and parent have the same domain, cors rules don't apply, so changes can be made. If you are embedding an iframe from your site on your site, you should probably trust your own code.
If you are asking how to prevent users from using the developer tools to mess around with your iframe contents, you can't. There are all sorts of things that website designers have tried to do to keep me from looking at their source. I've never found one that can keep me out.
does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).
My apologies if this has been asked in a different way elsewhere.
I have a web app that features a form users can embed on their websites via iframe. I am trying to make the content of the iframe responsive. I am familiar with how to edit content using media queries, but I am at a lost for how to use media queries that respond to the iframe's parent window. Is this possible?
Also - yes, I am aware of the Same Origin Policy, and no, I won't have access to end users' websites (to add javascript to the parent frame).
EDIT Media queries using max-device-width and min-device-width on the iframe'd content work, which I for sometime reason had overlooked. They were an easy fix.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.
The purpose is to let people embed my iframe at a certain size say 100*100, but then per user clicks this iframe should resize itself to the page size and back.
This should be independent of the structure of the HTML embedding the iframe (if possible).
Is it doable?
Guy
That is easily possible since an iframe is just an node on the page. I strongly recommend using iframes, however. My suggestion is to find another way. Iframes tend to be a portal for the passage of malicious client-side code.