I am trying to create an application which uses Moneris Hosted Payment Solution- basically implementing an iframe which needs to register an event on window on load. It has postmessage api, which when invoked will return a message, and what I can do is register a callback function so I can decode/use those messages.

The problem is I am not sure how can I invoke this window.onload on blazorwasm. I have tried to implement this but at the moment it is not working.

I am sharing my code. Your help would be a lot appreciated.

this is in my Blazor Page.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    Console.WriteLine("hello test");
    if (firstRender)
    {
        Console.WriteLine("invoking this function");
        await JSRuntime.InvokeVoidAsync("MonerisEvents.setWindowOnLoad");
    }
}

This is my javascript code in wwwroot.

window.MonerisEvents = 
{
    doMonerisSubmit: function doMonerisSubmit() {
        var monFrameRef = document.getElementById('monerisFrame').contentWindow;
        monFrameRef.postMessage('tokenize', '.php');
        //change link according to table above
        return false;
    },

    respMsg : function (e) {
        var respData = eval("(" + e.data + ")");
        console.log(respData);
        console.log(respData.responseCode);
        console.log(respData.errorMessage);
        console.log(respData.bin);
        console.log(respData.dataKey);


        document.getElementById("monerisResponse").innerHTML = e.origin + " SENT " + " - " +
            respData.responseCode + "-" + respData.dataKey + "-" + respData.errorMessage;
        document.getElementById("monerisFrame").style.display = 'none';
    },

    setWindowOnLoad : function setWindowOnLoad()
    {
        var self = this;
        window.onload = function () {
            console.log("was here second");
            if (window.addEventListener) {
                window.addEventListener("message", self.respMsg, false);
            }
            else {
                if (window.attachEvent) {
                    window.attachEvent("onmessage", self.respMsg);
                }
            }
        }
    } 
}

I am trying to create an application which uses Moneris Hosted Payment Solution- basically implementing an iframe which needs to register an event on window on load. It has postmessage api, which when invoked will return a message, and what I can do is register a callback function so I can decode/use those messages.

The problem is I am not sure how can I invoke this window.onload on blazorwasm. I have tried to implement this but at the moment it is not working.

I am sharing my code. Your help would be a lot appreciated.

this is in my Blazor Page.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    Console.WriteLine("hello test");
    if (firstRender)
    {
        Console.WriteLine("invoking this function");
        await JSRuntime.InvokeVoidAsync("MonerisEvents.setWindowOnLoad");
    }
}

This is my javascript code in wwwroot.

window.MonerisEvents = 
{
    doMonerisSubmit: function doMonerisSubmit() {
        var monFrameRef = document.getElementById('monerisFrame').contentWindow;
        monFrameRef.postMessage('tokenize', 'https://esqa.moneris/HPPtoken/index.php');
        //change link according to table above
        return false;
    },

    respMsg : function (e) {
        var respData = eval("(" + e.data + ")");
        console.log(respData);
        console.log(respData.responseCode);
        console.log(respData.errorMessage);
        console.log(respData.bin);
        console.log(respData.dataKey);


        document.getElementById("monerisResponse").innerHTML = e.origin + " SENT " + " - " +
            respData.responseCode + "-" + respData.dataKey + "-" + respData.errorMessage;
        document.getElementById("monerisFrame").style.display = 'none';
    },

    setWindowOnLoad : function setWindowOnLoad()
    {
        var self = this;
        window.onload = function () {
            console.log("was here second");
            if (window.addEventListener) {
                window.addEventListener("message", self.respMsg, false);
            }
            else {
                if (window.attachEvent) {
                    window.attachEvent("onmessage", self.respMsg);
                }
            }
        }
    } 
}

• javascript
• asp-core
• -core
• blazor
• blazor-webassembly

• 1 May I know whether it worked or not we add window.addEventListener("message", self.respMsg, false); directly in blazor wasm app index.html page? window.addEventListener("load", function () {}) could only work once the app just loaded. So that we couldn't add event listener in another window.onload event. – Tiny Wang Commented Nov 21, 2024 at 2:45
• 1 It worked, when I have removed the window.onload function, and invoked it directly from the blazor wasm app in a function. The javascript code is inside a js script while referenced from the index.html page of wwwroot. Yes your comment is right. – Fajitas Shawarma Commented Nov 21, 2024 at 15:17

1 Answer 1

Based on the confirmation from OP, register window.addEventListener("message", self.respMsg, false); event listener directly in blazor wasm app index.html page without window.onload function could work.