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.
Related
I require the ability to open a new window
window.open(url,'_blank');
Then run a javascript script such as
window.open(url,'_blank').ready("javascript in here");
But I don't know how to do it, is there a way that I can do this?
The description is short but I think that's all that needs to be said
In short you cannot do what you are asking. The new window is sandboxed. It can only run javascript referenced within its own html file.
One possible solution that might get you what you need would be to use postMessage. Even so in order to do this the receiving page needs to be listening to potential messages.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
An alternative would be to include a query param in the url and parse that param out client side in the new window and take action based on the value of the param.
I don't know exactly what your use case is, but browser extensions allow you to run arbitrary JavaScript code in webpages (content_scripts for Chrome, for example).
The downside is that the user need to install the extension.
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
I inject javascript code into a page user is currently viewing, on users command this script make DOM changes. At the end of this interaction user might want to save the page so that s/he can view/edit it later. I could remember the DOM changes that user made, But if the original page(at its source) is changed, I will not be able to restore this page for user. That is why I want to send the changed page to my server. I should be able to restore it completely and the page should behave exactly the way it did(including scripts and media).
Additionally I can not store media of users page at my end(resource limitation), so I guess I have to parse and modify all addresses/references/links of media to global URL/URI in various scripts(HTML/CSS/JavaScript).
Now the question is, Is there a library/framework/jquery extension that can help me achieve this objective ?
else, What is the right/professional way to do it ?
Since you are using jQuery you could try $("html").html(); just make sure to add the appropriate <html> tags when you output it again.
$('body').html()
$('head').html()
$('html').html()
Download firebug, and try it in the console window on this page. I am getting what looks like the correct data back.
Have I got It right that you are building some kind of CMS that let's the user edit entire pages (Not just seperate content blocks) in Contenteditable mode?
I would definatly advise looking at a solution like ckeditor/tinymce etc... Because doing it all yourself will be a terrible pain.
The answer from #Sydenam should work fine to save the whole HTML page.
Meanwhile, and this is IMPORTANT, I would recommend you to consider a potential SECURITY ISSUE here. Indeed the user can inject whatever he wants in the DOM and have you saving it, like nasty Javascript functions sending confidential information on a remote server for example.
So, in my perspective, a professional way of doing this would be to dedicate a PART of the DOM only to that usage, let say a <div id='editable_div'> that you can load using a $('#editable_div').load('your_url',parameters, etc...), and save afterward using another AJAX call.
When saving it you can parse this chunk of HTML and make sure nothing nasty is inside with some regexp (like tags).
Hope it helps,
Regards,
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 ;-)
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.