Call canvas functions from parent

I have create a iframe. And inside the iframe is the construct 3 canvas.

But how can i call any canvas functions from the parent?

This is how i get the canvas inside the iframe from parent:

var iframe = document.getElementById("iframeheadermain"); // Works!
iframe.onload= function() {
	
var iframe_canvas = iframe.contentDocument || iframe.contentWindow.document; // Works!

var icanvas = iframe_canvas.getElementsByTagName("canvas")[0]; // Works!
icanvas.MyFunctionInsideTheConstruct3Canvas(); // Here i call my custom construct 3 function - Dont work..
};

MyFunctionInsideTheConstruct3Canvas = function() {
	alert('Works!');
}
	

Your script

MyFunctionInsideTheConstruct3Canvas = function() {
	alert('Works!');
}

function mynestedfunction () {
	alert('Works!');
}

// get a list of all the iframes in my document, then take the first one and place it into a variable
var iframe = document.getElementsByTagName("iframe")[0];

// get the "Window" of the iframe, this is the global scope of it's document
var iframe_scope = iframe.contentWindow;
// get the function by it's name from scope
var iframe_scope_function = iframe_scope.mynestedfunction;
// call the function
iframe_scope_function()

Nepeo

Hm, on chrome and firefox globlaThis works.. but Microsoft Edge don't find globalThis!?

globalThis is quite new. It's not supported in Edge yet. It was created to workaround the fact if you wrote JS for multiple environments ( like a server and the browser ) they used different names for the global object.

From MDN:

Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use window, self, or frames - but in Web Workers only self will work. In Node.js none of these work, and you must instead use global.

The this keyword could be used inside functions running in non–strict mode, but this will be undefined in Modules and inside functions running in strict mode. You can also use Function('return this')(), but environments that disable eval(), like CSP in browsers, prevent use of Function in this way.

The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self, it's guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in.To help you remember the name, just remember that in global scope the this value is globalThis.

I think the C3 runtime will create globalThis if it doesn't exist. But it depends where you're reading it from I guess.

If you're only doing this in the browser it makes sense to just use window/frame.contentWindow.

Edge is being replaced with a Chromium based version very soon, so it will have support for it then.