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).
Related
I'd like for the opener of an iframe to be able to detect each time the user changes pages within that iframe. Using jQuery, I can detect each time a page finishes loading within an iframe via the following:
$('#myIframe').on('load', function() {/*do stuff*/});
However, I'd also like to detect (in the iframe opener) each time a page starts loading within that iframe.
Note: The content that is displayed in the iframe is from a third-party site, so I don't have the ability to insert code there so that the iframe can explicitly alert the opener.
Does anyone know of an event that is fired when a page begins loading? I'm not having much luck finding anything via Internet searches, as most people seem to only be interested in detecting when the iframe has finished loading.
It seems unfortunately that the only way to be sure it will work in most browsers is to use the <iframe onload="myonloadscript();"
The window.onload event of the main page will tell you when the iframe has loaded and you can be sure it has begun it's request for it's src page
Edit:
Just copying it from an article (Their are hacks for this)
doing this cross-domain? Not so easy. You’ll get something along the line of: Child document does not have the right to access parent document. In fact there is a lot of documentation on the web about how to achieve it, but the problem is that it is often outdated, with solutions that often only works in a couples of browsers.
I was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.
I am currently trying to display a third-party website in an iFrame on an internal website. They are both located on the same second-level domain.
The third-party website uses some JavaScript script which use top and window.top to reference to the current window.
Could there be any reason for this except to prevent that the scripts work in an frame?
The third-party actually said they would support the displaying of the website in an iframe.
Could there be any other JavaScript related problems when viewing a website in an iFrame besides a reference with top?
There is no other reason for using top than to bother sites that are framing them.
Perhaps it is legacy code that had the actual code in the frameset html.
Other issues with iframes could be navigation using back and forward buttons and access denied when using a window.xxx statement
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.