Solved

JavaScript communication inside a IFRAME

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

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 55

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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 55

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 55

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 55

Expert Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML Anchor Link Problem 3 37
Wordpress Only run code if on a certain page 11 23
JQuery Syntax... 4 37
Dreamweaver code color same as CS6 or CS2015 2 13
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

827 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