How to call Javascript function of child page from master page

1

I have master page embbed many iframe ( child page) inside, and on child page has fuction callfunction();
How can I call and run callfunction(); from master page?
I tried this code but not work
document.getElementById(“iframeid”).contentWindow.callfunction();
Thank you so much.

2

Hi @chansi12

Hype’s HTML Widget (which is an iframe) is placed in its own container element (just like other elements) plus an iframe inside it. So, to access the iframe you would have to write this:

document.getElementById("iframeid").childNodes[0].contentWindow.callfunction();

The structure for a HTML widget in the DOM is

<div class="HYPE_element_container"...
    <div class="HYPE_element" id="iframeid" ...
        <iframe ...
3

Sorry , not work
I tried this but it did not call function closevid(); on childpage.html when I click on closevid button on masterpage.
Could you check my file?
Thank youtest.zip (238.6 KB)

4

Due to security measures of browsers, there is no way for a parent to access elements within a child directly. You need to use a method called postMessage to be able to communicate to it; this requires a bit of code and isn’t straight forward, though there may be some examples on the forums that are useful if you search for it on the forums or google.

5

I saw this link

They said it worked but I tried and it did not work on Hype.
This my file file.zip (28.3 KB)

6

There’s a few issues with this line in index:

hypeDocument.getElementById('child_frame').contentWindow.childfunction();
  1. You do not have access to hypeDocument variable directly from the Head HTML (as there can be multiple hypeDocuments on a page). There are ways to get to it, but in this case it will just be easiest to use the document variable.
  2. “child_frame” is not an element. On the page it is called “video_frame” as found in the Identity Inspector.
  3. The “video_frame” element isn’t an iframe itself; it holds an iframe. Therefore you need to access the first childNode in order to get at the contentWindow. Generally you can check out what it is doing and figure this out by logging the element to the console; this would make it clear it isn’t an iframe.

The corrected code for the index head html like:

document.getElementById("video_frame").childNodes[0].contentWindow.childfunction();

With this it is able to trigger the child alert.

1 Like
7

I used that code
document.getElementById(“video_frame”).childNodes[0].contentWindow.childfunction();

but it not run anything when I click on masterbutton. I ran it on chrome browser.
It did not call function childfunction on child page

file.zip (28.5 KB)
Help me please.

8

It works but the files needs to be on a server (not local) - at least in my experiments:
Demo here.

This is how it looks on my server:

1 Like
9

You can also use post message which will avoid the cross domain issue in this case.

In the iframe head file.

<script type="text/javascript">
	
	window.theCallData = ""
	window.addEventListener('message', function(theEvent) {
     
    if (theEvent.data[0]=== 'pcall'){
     window.theCallData = theEvent.data[1];
     childfunction()
       }
    
    }, false);
    
function childfunction() {
	var dt = new Date();
	alert(window.theCallData +  dt  );
}
</script>

In the Parent head.

<script>

function masterfunction()
{
	 
document.getElementById("video_frame").childNodes[0].contentWindow.postMessage(['pcall', 'CALL FROM PARENT '], '*');
    
}
</script>

iFrame_postMessage_v1.zip (216.8 KB)

2 Likes
10

Thanks, both methods are perfectly. Special thanks.

11

Thanks, I was looking for this kind of solution for several days.

1 Like
12

Hype GlobalBehavior might also help as it has this built in.