Accessing an element outside of iframe - javascript

I have a file: 1.html and an iframe inside it.
I want to access an element (lets say myelement) which exists in 1.html (outside of iframe) from the iframe.
How can I do that?
I tried:
top.getElementById("myelement")
top.document.getElementById("myelement")
parent.getElementById("myelement")
parent.document.getElementById("myelement")
but it didn't work!!

Communication between an iframe and parent document is not possible for cross-origin resources. It will only work if the iframe and the containing page are from the same host, port and protocol - e.g. http://example.com:80/1.html and http://example.com:80/2.html
For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.
Edit - assuming both resources are from the same origin
In the iframe, window.parent refers to the global object of the parent document, not the document object itself. I believe you would need to use parent.document.getElementById

Assuming that same origin policy is not a problem, you can use parent.document to access the elements, and manipulate them.
Demo here, source of outer frame here, source of iframe here.

parent.document Not working
For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.

Communication between an iframe and parent document is not possible
for cross-origin resources
that is in so many ways wrong, i dont even WANT to know where to begin. Of course cross-domain requests and algorith-exchanges have a long history, it is both well documented and working now, one might start JSON-request or even simple XMLHttp-Requests via JQuery, for example, you can even load whole .js-files AND inject them into your code - injecting code in remote sources will of course need an appropriate interface; one may achieve such a thing via communication with the responsible persons, just ask them nicely and maybe they'll cooperate if your project makes sense and has its use.
To answer the question : accessing whole documents would raise the need for transferring it beforehand - i would recommend XML for that purpose because the DOM-tree and XML are nearly interchangeable. Load the tree via .get (.ajax for remote hosts), append it to this and access it just like you want ... sounds easy and if you got some experience it IS easy. If you ever read "cross-domain" and "not possible" in the same sentence again you might as well ignore the poster - there are many people out there who dont know what they're talking about ;-)

Related

How can I get the contents of an iframe without putting the iframe on the page?

How can I get the html of an iframe without physically putting the iframe on the page? Can I put the iframe into a variable and get it that way?
If you're using node.js (which I would recommend for this), then take a look at jsdom.
As for javascript specifically, you cannot make a call to an external page using javascript (without using hacky methods), as it would violate Cross-domain policy
An untested afterthought, but you might be able to put an iframe hidden through css and then access the content through the document/jquery.
You can make a php-page with the HTML-content,
Easily include the file with php include:
<?php
include "filename.php";
?>
but...why?
You cannot use javascript to get content from cross domain url. So even if you have actual iframe element on your page, you will not be able to access its elements using javascript. This is called Same Origin Policy.
though JSONP is an alternative to your case, you will not be able to access elements inside iframe. You can use Jquery and JSONP to get html of cross domain page
Another option For this scenario is, you can grab the content from server side scripting language like c#, PHP

Domain wide localStorage fall-back for I6 & IE7?

In our current project, we're using HTML 5 localStorage with fall-back to global storage for Firefox and userdata behaviors for IE6/IE7.
The fall-back is provided through a JS script called jStorage.
This worked ok, until we started testing in IE6/IE7, even though it "works", it turns out that there's a restriction in userdata behaviour which locks it down so storage can only be set and read on the same URL or as MSDN puts it "For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store".
Hence if I set a value on one page and then navigate to another, although I'm on the same site, it won't work.
Which for us pretty much renders it unusable as a fall-back for local storage, which is scoped per domain.
Has anyone come across this problem before and found a decent solution?
Any ideas or thoughts will be appreciated.
Remy Sharp's polyfill will do that.
https://gist.github.com/remy/350433
if the problem is to get data across two page in different paths, but in the same domain, you could try one of these (note: i didn't try: i'm just trying to be creative)
Use url rewriting (with an .htaccess) so you can access /path1/page1 and /path2/page2 with a single path-rewritten/page1 and path-rewritten/page2
if you are in /path2/page2 you could load an invisible iframe loading a page in /path1 in which you get the data stored in some data structure that you pass in the parent document.
Since page1 and page2 are - per hypothesys - in the same domain you can make the page1 and iframe communicate each other via javascript.
btw good question.
A theoretical solution would be:
dynamically create a hidden "proxy" iframe accessing a static
document retrieved from a location of your convenience, say
http:/domain/proxy.html
proxy access to the DOM element in the iframe to persist/fetch data

ExternalInterface passing values from swf to an iFrame on the same page

On a page I have a an iFrame and a swf, I've been trying to use ExternalInterface to pass values from the swf to the iFrame, anyone ever tried this and had any luck? I won't be able to post any code until tomorrow, will update then if needed.
Thanks in adavnce.
Here is a visualization of what I need to accomplish, perhaps if it can't be done the way I said someone will have a suggestion of another way to accomplish this.
Try to target the frame. This should work with one frame on the page or you will have to change the index.
duhFrame = window.frames[0]
targetElement = duhFrame.getElementById('someIframeElement');
If this doesn't work for you then use LocalConnection and put a hidden swf on the iframe file.
LocalConnection is Global to the browser so be aware that if two browser windows are open you will get two iframes connecting on the same name and will get some funky results. So change the connection name via query string and flashvars.
Its a real hackish workaround but it will work.
[EDIT]
One more thing make sure your javascript callback function is getting called as ExternalInterface has major domain issues when running under the file structure and not in a domain(EX: clicking run in the editor ). Try uploading to your server and change your embed code to allow for it. Also dont forget to update your crossdomain.xml(s).
You cannot access iframes from outside of them. These are security reasons, and browsers will and should block such attempts.

Why wouldn't this jquery load work?

This is not loading the website that I wanted.
$('#example').load("http://www.example.com");
http://www.jsfiddle.net/JFdVv/
You can't load content from a domain other than the one you're on unless it's JSONP (JSON with a function wrapper)...you can't load plain HTML like you're trying, it's blocked for security reasons by the same origin policy.
As an aside, the reason you get an error with example_ajax_request inline in the page is that by default jsfiddle puts your JavaScript code in a wrapper...you need to have functions like that directly in the page (global functions, not scoped to a ready handler), notice the first drop down up top...it needs to be "no wrap" (either one), instead of "onDomReady".
If you really must load a page from different website, you can always use an <iframe> although this practice would be questionable to say the least.
Or, for a server-side solution, if you're using PHP, you can have a look at the PHP cURL library.

Copy html content from iframe into div ( ajax )?

Lets assume I have my browser load an Iframe with <iframe src="test.html">
Can I, using ajax, load the content of test.html into a div in the main html page?
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts. The plan is to generate the dynamic page with 0 sized iframe which makes report request to remote host. Then, after the page (& iframe content) loads I will copy the iframe content into a div using JS.
Tips are appreciated,
Thank you,
Maxim.
No, you can't.
When you load a page from a different domain into the iframe, it becomes unreachable. You can no longer access the contents of the iframe, as it comes from a different domain.
The only thing that I know of that you can reliably load from a different domain is a script, which JSONP uses.
Can I, using ajax, load the content of test.html into a div in the main html page?
Yes (since your example has a relative URI and is on the same host) …
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts.
… and no. You still can't read data from remote hosts.
I'm sure someone will correct me if I'm wrong, but I believe that scripting across domain boundaries is restricted. Have you tried it? Here's a function that may help out.
function insertDivFromFrame(divname, framename) {
var frame = document.getElementById(framename);
var d = frame.contentWindow || frame.contentDocument;
if (oDoc.document) {d = d.document;}
document.getElementById('yourdiv').innerHTML = d.body.innerHTML;
}
I'm not sure this code works... see http://xkr.us/articles/dom/iframe-document/ for more help on this.
... you may, however, design an AJAX request to local host and retrieve information from the remote server (as described here).
If you write a php/perl/etc. script to output the contents of a document from another domain, it'll give you access to the contents as the resulting page would be considered by javascript to belong to your domain. If you're not familiar with any server-side scripting languages, I'm sure you'd be able to find a script that'll do this for you by doing a simple google search.
Best of luck.

Categories

Resources