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.
Related
I am working on a web app that needs to have two parts. The one is a controller and the other is a display. Something like Google Slides in presentation mode. The controller has a button to launch the display:
<script language="JavaScript">
function OpenMain()
{
var MainPage = window.open("TheUltraSignalLite.html");
TimerIMG = MainPage.document.getElementById("TimerIMG");
TimerIMG.src = "TM-Full-Blue.jpg";
}
</Script>
The call to window.open seems to return null. I have tried Chrome, Edge, Firefox, and Opera and they all have the result. These are all local files for now, but I might put in on a web server someday. I have seen some answers that want you to turn off security, but I cannot ask everyone who uses this app to turn off security. How do I get a valid reference to the display window?
Edit 1:
Yes, window.open from the local disk does cause a CORS restriction.
I tried this where both files are in the same AWS S3 Bucket, so the CORS should not be an issue. But I still get a null on the window.open. If I put a breakpoint on the first line, then everything worked. If I split the open and the rest of the code into two functions with two buttons, it works. So it looks like I have to find a way to run the open in an async way.
Edit 2
My solution to keep it simple was to put the window.open in the OnLoad event. This opens the child window and allows it to fully render and the value of MainPage is ready to use. (I changed the MainPage to a global variable.) I still have to run it from some type of web server, rather than loacl file, but that is not a big deal.
If you are not allowed to access the new window content, then the problem you are encountering is a basic security feature of web browsers. Citing mdn:
The returned reference can be used to access properties and methods of the new window as long as it complies with Same-origin policy security requirements
To read more about Same-origin policy
If your new window respects the Same-origin policy, then you can access the content of the new window with for example:
// Open index.html from the current origin
const newWindow = window.open('index.html')
const h1 = newWindow.document.querySelector('h1')
If you want to avoid asking users for pop-up permission, then you should probably use a link instead of a pop-up.
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 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
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.
I have:
A web server (server 1)
An application server running some beast of a legacy web app (server 2)
An iframe on server 1 pulling in the application from server 2
My problem is:
The legacy app uses JS validation on its forms. When a user attempts to submit an incomplete form, an alert pops up to notify the user that they are a dummy. Of course, this fails when the app is run inside of an iframe because server 1 and server 2 live at different domains.
I tried setting the following proxy directives on server 1:
ProxyPass /legacy_app http://server2.url/legacy_app
ProxyPassReverse /legacy_app http://server2.url/legacy_app
I'm now able to serve the iframe from http://server1.url/legacy_app, but I'm still unable to execute javascript inside that iframe -- I get the same security/access errors as I did when the app was running on a different domain.
Is there something else I can try?
How is the legacy app checking if the boxes are filled in? Simple javascript? Ajax?
The alert box itself should still work. I'm thinking the code for determining if the alert should be issued might be what's broken.
Running the following code on my local apache server still gives me the alert onLoad even though the page is on a remote host:
<html>
<body>
<div>
<iframe src="http://www.crowderassoc.com/javascript/alertbox.html" width="300" height="200">
</div>
</body>
</html>
Try copying the above code to a page on server #1 and see if you get the alert box from that remote site in the iframe.
Have you tried hosting the script inside of a .js file hosted on server #1 but running out of the iframe (referenced out of server #2)?
I think a browser is okay with referencing an external site, but doesn't like it when it is referenced by an external site.
Haven't tried it myself, but I believe that's how I've heard of this sort of a problem being worked around. I know this is the method that Google Analytics uses - you have to request the .js file from Google's servers, but once it's there, it has access to the browser.
Joe, I think you are correct. A quick test with other servers shows that I can trigger alerts from remotely-hosted scripts quite easily.
The legacy server is the client's and we don't have easy access to it, but glancing at their JS it looks like they're doing some sort of cross-site/framing detection -- worth further investigation.
I've had this situation in the past where I was trying to build an app around a heavily scripted pre-existing app on a remote server, and the app would run fine if it was opened in its own window, but if I tried loading it into a frame, it would break.
What I ended up doing for this project was opening the local application in a pop-up with a width of 495px, loading the external app in the main (already existing) window, resizing the main external app window to the screen width minus 495px, and positioning the windows side by side on the screen. This gave the end user a similar effect to what I had been trying to do with frames, only it worked.
In case it helps, here is the code I used from my index.php file:
// Manipulating the current window
window.location.href = 'http://www.someExternalApp.com'; // setting the page location.
window.name = 'legacyapp'; // setting the window name just the for heck of it.
moveTo(0,0); // moving it to the top left.
// Resizing the current window to what I want.
mainWindowWidth = screen.width - 495;
mainWindowHeight = screen.height; // Makes the window equal to the height of the users screen.
resizeTo(mainWindowWidth,mainWindowHeight);
// function for opening pop-up
function openWin(){
win2 = window.open(page,'',winoptions);
win2.focus();
}
// internal app location (for use in pop-up)
page = 'someLocalApp.php';
// internal app Window Options (for pop-up)
winoptions = 'width=490,height='+mainWindowHeight+',top=0,left='+mainWindowWidth+'leftscrollbars=1,scrolling=1,scrollbars=1,resizable=1,toolbar=0,location=0,menubar=0,status=0,directories=0';
// Opens the local app pop-up
openWin();