Solved

JavaScript communication inside a IFRAME

Posted on 2016-10-18
9
48 Views
Last Modified: 2016-10-18
Hello we have 2 pages and in the first page called index.html we call there an iframe to call a second page called "resultFrame.html" like this:

<iframe height="100" id="resultFrame" src="resultFrame.html"></iframe>

Open in new window


In that second page "resultFrame.html" inside we use a video routine to call via HTML 5 video:


<HTML>
<HEAD>
<style>
/* set container dimensions */
#player {
  display: block;
  width: 640px;
  height: 480px;
}
</style>
<!-- adjust paths here -->
<script src="flowplayer-3.2.13.min.js"></script>
<script src="flowplayer.ipad-3.2.13.min.js"></script>
</HEAD>

<BODY>


<video controls="controls" autoplay="autoplay" id="myVideo" width="640" height="480">

	<source src="video.mp4" type="video/mp4" />
	<source src="video.webm" type="video/webm" />
	<source src="video.ogv" type="video/ogg" />

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
		gotonext();
    }
</script>

</video>


</BODY>
</HTML>

Open in new window


Now in that second page if you see after the video play is finished we execute the function "gotonext();" now that function when executed is not part of that second page "resultFrame.html" where we are calling that function "gotonext()". The function "gotonext()" is part of the first page "index.html". In "index.html" we have that function code "gotonext()" defined and there we process some data that must be executed in "index.html" not in the second page "resultFrame.html". Now the question how can we execute the "gotonext()" from "resultFrame.html" and that execution is made result in "index.html"

I hope someone can help.

Thank you
0
Comment
Question by:Alex E.
  • 5
  • 4
9 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848385
You probably want

window.parent.gotonext();

Open in new window

0
 

Author Comment

by:Alex E.
ID: 41848668
I have on the first page in "index.html" in the head section for example:

<SCRIPT>

function gotonext(){alert('sometext')}

</SCRIPT>

Open in new window


In the same "index.html" in the body section I call the iframe like this:

<IFRAME width=\'200%\' height=\'400%\' frameborder=\'0\' allowfullscreen=\'true\' webkitallowfullscreen=\'true\' mozallowfullscreen=\'true\' src=\'http://www.anydomain.com/prog/resultFrame.html\'></IFRAME>

Open in new window


In the second page I have in body section:


<video controls="controls" autoplay="autoplay" id="myVideo" width="640" height="480">

	<source src="video.mp4" type="video/mp4" />
	<source src="video.webm" type="video/webm" />
	<source src="video.ogv" type="video/ogg" />

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
		window.parent.gotonext();
    }
</script>

Open in new window


But does not trigger the alert pop up that index.html has defined like a function in gotonext(). What could be?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848748
Here is a working sample using your code.

If your code is not working it might be because of a same origin issue - is your iframe src a different domain from the host page?
0
 

Author Comment

by:Alex E.
ID: 41848806
I see it works if you call like you say in same domain. What I was doing is call via locally the first page "index.html" and itself the "index.html" called the iframe to www.anydomain.com then is very clear the cross domain issue.

 Now is there a way to call between iframes not in the same domain? Just to know if that is possible.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848848
You can but you have to be in control of the domain serving the Iframe.

Take a look at PostMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage?redirectlocale=en-US&redirectslug=DOM%2Fwindow.postMessage

As an option.

I have to sign out for today but if you have not solved this by tomorrow I will pick it up again.
0
 

Author Comment

by:Alex E.
ID: 41848927
What I see on that link is that they use post message. But I just entered an example of the function gotonext() doing an alert command in JavaScript but in reality the gotonext() function is not an alert like I entered in the example is more complex because it has color changes in backgrounds, process some math calculations data inside index.html, etc. In other I don't know if it is possible call the function from the second page "resultFrame.html" and execute the function "gotonext()" in first oage "index.html". Like it is now but accepted in cross domain.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41849025
You can.

I have modified the sample to demonstrate the concept.

If you run this locally
<!doctype html>
<html>
<body>
	<iframe width="640" height="480" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="http://www.marcorpsa.com/ee/t1733.html"></iframe>
<script>
window.onmessage = function(event) {
  var evt = event || window.event;
  alert(evt.data);
  // PUT YOUR CODE HERE
}
</script>
</body>
</html>

Open in new window

You should see the alert with "Message" in the popup.

That is the same as your gotonext you put your code in the // PUT YOUR CODE HERE section of the onmessage.

Here is the updated source for the server script
<video controls="controls" autoplay="autoplay" id="myVideo" width="640" height="480">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
  <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) 
{
// What you want to do after the event
window.parent.postMessage('message','*');
}
</script>

Open in new window

0
 

Author Closing Comment

by:Alex E.
ID: 41849184
Thank you
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41849451
You are welcome.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now