Solved

JavaScript communication inside a IFRAME

Posted on 2016-10-18
9
55 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 52

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 52

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

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 52

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 52

Expert Comment

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

929 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

11 Experts available now in Live!

Get 1:1 Help Now