Stop Function inside HTML Component From Being Invoked on Page Load

Ask the community
,
1

Hey,

I have a function inside an HTML Component which I do not wish to invoke unless the page uses a postMessage() function to send a message to the HTML Component.

But the function is being invoked whenever the page is loading and naturally throwing the following error.

699×316 13.6 KB

The HTML code:

<script src="https://js.stripe.com/v3/"></script>

<script>
	const stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXX');
    window.onmessage = (event) => { //receives the message from the parent
    	if (event.data) {
  	    let jackpotId = event.data.id;
            myFunction(jackpotId);        
    }}
    
    function myFunction(jackpotId) { //don't run on page load. Why you run?
  	stripe.redirectToCheckout({
  		sessionId: jackpotId
             }).then(function (result) {
        
             });
	}
</script>

When I want the function to run? When the page sends the following:

   let obj = {
        id: response.id
     };
   $w("#html2").postMessage(obj);

Although when the message is posted the function runs as desired but I want to eliminate the Errors generated in the browser’s console.

Shan

2

And when does the page send the postMessage ?

3

When a user clicks a button (onClick event)

4

@shantanukumar847 No idea. Can you add a console.log() to the onmessage itself to see if it runs on page load?