Solved

JavaScript communication inside a IFRAME

Posted on 2016-10-18
9
77 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 57

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 57

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 57

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 57

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 57

Expert Comment

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

Featured Post

Is Your DevOps Pipeline Leaking?

Is your CI/CD pipeline a hodge-podge of randomly connected tools? You’ve likely got a tool to fix one problem & then a different tool to fix another, resulting in a cluster of tools with overlapping functionality. Learn how to optimize your pipeline with Gartner's recommendations

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

728 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