?
Solved

JavaScript communication inside a IFRAME

Posted on 2016-10-18
9
Medium Priority
?
80 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.
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 58

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 58

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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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
 
LVL 58

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 58

Accepted Solution

by:
Julian Hansen earned 2000 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 58

Expert Comment

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

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

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