After some research (even at stackoverflow) I still can't figure out how to do this. parent.method() won't do the trick, nor some other solutions I've tried.
Situation: I have a index.html on the client side (mobile phone in this case) which has an iframe loading server-side page. What I need to do is call a javascript method defined in the index.html (client side) from the iframe content (server-side).
As an example (I'm not using android in the question described above), Android apps have addJavascriptInterface which, when defined, allows one to call methods defined client-side from server-side pages just invoking window.CustomObject.MethodToCall().
Any hint?
Thanks!
window.top.foo
for the top level window
window.parent.foo
for the direct parent
I realize I am only a year late to this party but there was no real answer.
So, in order to do this both files must be on the same domain. Since you have the index.html on the phones localhost and load a page on your site it will not work (locahost to example.com). You could load the index.html off your site as well and that would fix this problem (example.com to example.com). Then you could reference the parent frame in the normal window.top.function.
In certain situation there could be a neccessity of calling a javascript function inside an iframe from the parent document, and vice versa ie;
calling a javascript function in parent document from the iframe.
For example; the parent document have an iframe with id attribute ‘iFrameId‘, and the function ‘functionInIframe()‘ is defined in that iframe document.
Following code can call that iframe function from the parent document itself.
document.getElementById('iFrameId').contentWindow.functionInIframe();
And following code can call the function defined in parent document(functionInParent()) from the iframe itself.
parent.functionInParent();
This way javascript can interact between parent document and iframe.
This is the original post.
Related
I have set up an Articulate Storyline course (a Flash version accessed using the page "story.html" and an HTML5 version accessed using "story_html5.html"). It works fine when run directly, however, when I try to run everything in an iframe on the company server (linking to the course files on my personal server) I get JavaScript errors:
The course uses player.GetVar("HTML5spelaren") to access a variable called HTML5spelaren, which is located on the story_html5.html page itself. When running in an iframe I get a "Permission denied to access property 'HTML5spelaren'".
Finally the course uses the JavaScript var newWin=document.window.open("report.html", "Kursintyg"); to display a course completion certificate in a new window. When running in an iframe however this results in a "Permission denied to access property 'open'".
Is there a way to rewrite the JavaScripts to get around this? I need to be able to detect if the course is running in Flash or HTML5 mode (that's what I use the variable in story_html5.html for), as well as being able to use JavaScript to open a new page from within the iframe when clicking on a link.
Page structure:
https://dl.dropboxusercontent.com/u/11131031/pagestructure.png
/Andreas
There's a way for different domains to speak to one another via javascript. You can use postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
In your case, in story.html or story_html5.html could use something like:
parent.postMessage(HTML5spelaren, parent_domain);
and you add an event listener in the company page:
window.addEventListener("message", receiveMessage, false);
And in receiveMessage function you retrieve the data that you need. Something like:
function receiveMessage(event){
your_variable = event.data
}
Same logic can be probably be applied to your popup.
You can post from child to parent or from parent to child.
My guess is that content you're linking to in the iFrame is on a different server/domain. If so, the error is a security feature to stop cross-site scripting (XSS) attacks.
Consider putting both the parent iFrame and the articulate content (child) on the same server. This should eliminate the problem.
I am loading a remote page with an iframe in node-webkit app.
I would like to run a function from the node.js app from the webpage.
In app.js i have
var xxx = function(){ console.log('test'); }
and in http://www.test.com/index.html i have tried:
window.xxx();
xxx();
global.xxx();
But nothing seems to work.
How can i do that?
Many thanks
If I understand correctly, you want to access a function that's defined in the remote page that you are including as an iframe in your current page, right?
There are two separate issue here, I think.
First, you need to have a handle on the iframe, then access that window's environment through the 'contentWindow' property of the iframe dom element, i.e. given an iframe with id foo, that points to a page with a function named bar, you could do this:
x = document.getElementById('foo');
x.bar();
This works fine for me with a local page, but the other issue is that you might find some difficulty with running a remote page in an iframe and still having access. If it's a page under your control, that might work, but some pages don't like to be run in iframes, so then you have to sandbox to some extent, which may interfere with your ability to access it in this way. It's been a while since I played with sandboxing, so I'm not sure, but if it's a page you control, you should be able to set it up so it's not a problem.
I am looking for a way to modify an iFrame attribute (a textbox value actually). The iFrame is on another domain and I do have access to it. From what I understand I must do that after the entire page (iFrame included) is rendered. I tryed something like that:
<script type="text/javascript">
$(window).load(function() {
alert("test");
d = document.getElementById("myframe");
d.contentWindow.document.getElementById("frametxtbox");
});
</script>
But I always get the following error:
Cannot call method 'getElementById' of undefined
I also noticed that the alert pops up BEFORE the iFrame is rendered, so I think my script is executed before page has access to frame values and, therefore I get the error. I have very few knowledge of web-related programming (always worked on backend side) so forgive me if my question maybe makes no sense.
If the iframe points to another domain, it'll be subject to same origin policy. This means that before you try to access its document you'll have to check the wiki and relax the policy (check the link for details). After that you'll need to bind ready event to the iframes document, rather than your main page doc.
$(window.frames['myframe'].document).ready(function() { alert('moo'); });
See if this helps :)
I am trying to load a url in iframe which i dont have complete control . It loads the Javascript which has a Document.CreateElement and it has some reference to the window object which is failing because an iframe is not allowed to access the window. So i want to override the implementation of the function,So the function which i have written will run instead of the one written by the other website
it can't be done if the other website is not on your domain
I am trying to do the following:
Main document calls a function in iFrame whose URL is from a different location but the Javascript function I'm trying to call loaded from the same domain as the main document.
Is there any way to do this?
To clarify:
Main document: http://www.main.com
iFrame document: http://www.example.com
JS function i'm calling in iFrame is at http://www.main.com/js/script.js
I'm getting
Permission denied to access property 'js_function'
When doing
document.getElementById("iframe").contentWindow.js_function(n)
Even though the script is hosted on main.com it is executed in the context of example.com and therefore is considered to be part of example.com ... and therefore has no access to variables or functions in the main.com window. You can hack around this with various cross domain communication hacks (or you can ignore IE < 8 and use window.postMessage by itself).
SEE ALSO: http://stevehanov.ca/blog/index.php?id=109
I see what you're doing. There was a "hack" that made use of two iframes (if I remember correctly).
Both that hack and the one you mention here are awfully obscure, and I wouldn't be surprised if they have been locked down knowingly.
The best fix I can think of is to load the code for js_function() in the main window (outside of the iframe).
Can you be more specific on what the JS code does? I may be able to help better.
Use easyXDM's RPC feature, it combines XDM with RPC.
An example of this can be seen here: http://consumer.easyxdm.net/current/example/methods.html