How do I call a C3 function from another application in the browser?

Post reply
2 favourites
  • 15 posts
From the Asset Store
Medieval & Viking War Horns Calls
$5 USD
Medeival & Viking War Horns Sounds / 22 Unique Calls / 2:40 minutes of audio
Blackmid's avatar
Blackmid

  • Primary I guess I need to somehow be able to first locate the C3 element and then somehow call a function.

    In my case the application that calls the function is actually an iframe contained within a C3 window so I thought I might use something like this...

    window.parent.c2_callFunction("FunctionFromIframe");

    But that just doesn't do anything at all.

  • Dead link apparently. :(

  • Dropbox is down, try again a bit later.

  • That works great. Thanks for the example! parent.c3_callFunction("myFunction")

    The problem I have now though is that my iframe isnt allowed to communicate with C3 during preview because of COrs policy.eg:

    C3_InterfaceTest.js:213 Uncaught DOMException: Blocked a frame with origin "http://localhost:8668" from accessing a cross-origin frame.

    In your example the html was part of the iframe inside C3 itself (so everything works fine) but in my case it uses an external.html file to embed.

    Although my iframe will eventually be on the same server and directory when online I have no idea how to make this work locally when testing in C3. I got a chrome extension which was supposed to block COrs but that doesnt seem to have any effect.

    Any ideas how I can test locally without having to do an upload to my website each time I need to test something?

    Cheers

  • SOLUTION

    In order to send messages and bypass CORS issues during testing rather than use the c3_callfunction event I instead am using Window.onMesssage to send dat from the iFrame back to C3. This is how its done:

    In Child Iframe: 

    //send simple message without data
		parent.postMessage("MsgFromIframeToC3", "*");
		
		//send to c3 with some data
		parent.postMessage(
			{
				event_id: 'MsgFromIframeToC3WithData',
				data: {
					v1: 'value1', 
					v2: 'value2'
					}
			}, 
			"*" 
		);

    IN C3: 

    window.onmessage = function(event) {

	//A single message
	if (event.data == 'MsgFromIframeToC3') {
 console.log('Message from iFrame Received');
		
 }
	
	//a message with data
 if(event.data.event_id === 'MsgFromIframeToC3WithData'){
 console.log( "c3D 3d Says: "+ JSON.stringify(event.data.data));
		console.log(event.data.data);
		
 }
}

    ..and of course its completely possible to send message the other way (from C3 to iframe) using the same system in reverse (use window) for example (in C3): 

    var myIframe = document.getElementById('myIframe');

myIframe.contentWindow.postMessage('MessageToIframe', '*');

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • My game runs inside an iFrame on a PARENT web page.

    I need to READ several variables that exist within the PARENT web page

    and SET Construct Global Variables with the values of the PARENT variables.

    HELP ???

  • Creeps Compilation You probably need to create a function in the parent page that would return these variables. And then call that function from the C3 code.

    Another option is to use query parameters, check out this post:

    construct.net/en/forum/construct-3/how-do-i-8/variable-webpage-153171

  • Hi Dop2000,

    Thank you very much for the help..

    I am not sure I understand the javascript code?

    On the PARENT web page, I have established a variable like this: 

     var my_var = 'hello world!';

    My Construct game exists inside an iFrame within the PARENT webpage.

    With a button click inside my Construct game, I can read the variable

    as you can see in my screen shot below.

    I am just confused on how I can SET a Global Variable within my game

    with the variable value located on the PARENT webpage?

  • Basically,

    I need to know how to establish a variable in my PARENT web page

    that can then be READ into a global variable within my game which

    lives inside an iFrame on my PARENT webpage?

  • Just remove the alert. Browser.ExecJS("parent.var")

    Also, in C3 it's easier to use a script instead of Browser object.

    runtime.globalVars.userID=parent.var

  • That WPRKS GREAT !!!

    Thank you dop2000

  • SOLUTION:

    Declare variable in PARENT Web page.. 

    var my_var = 'hello world!';

    System

Post reply
  • 15 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)