The "apply" function in Javascript cannot be found in the window.external extension object

Question

The "apply" function in Javascript cannot be found in the window.external extension object

Utilizing the javascript extension (known as window.external) in IE8 (or any IE version) to expose specific functions, I encountered an issue when attempting to call the apply function. Despite the belief that it is inherently available in every JS function, the browser consistently throws an exception stating that the apply function is not present for that function within the window.external object.

For instance, the following code functions correctly:

function onDataReceived(url, success, status, data, errorMessage) {
    alert(onDataReceived);
}

function innerTest() {
    alert(arguments[0] + ", " + arguments[1]);
}

function outerTest() {
    innerTest.apply(null, arguments);
}

outerTest("hello", "world");

// alerts "hello, world"

However, the subsequent code triggers an exception:

function outerTest() {
    window.external.innerTest.apply(null, arguments); // <-- exception
}

outerTest("hello", "world");

The main challenge lies in passing an unknown number of arguments to the external function, leading to a roadblock in my progress.

Any suggestions or insights would be greatly appreciated.

EDIT:
After accepting Mike Samuel's response, I realized that the apply function is not present in the window.external object, presumably due to it not being a native javascript object. As a temporary solution, I followed Mike's advice on the "worst case" scenario. Thank you.

javascript internet-explorer external

Answer 1

Answer №1

In the scenario where window.external is considered a host object, or originates from an extension mechanism that prefers not to expose its prototype to page logic, it may function as intended but lack the typical call and apply functionalities. Fortunately, you can still utilize call and apply as shown below:

Function.prototype.apply.call(window.external, null, [argumentsToExtension])

For a more abstract approach:

Function.prototype.apply.apply(window.external, [null, [argumentsToExtension]])

Here, the null parameter represents the value of this, which should effectively equate to window following the standard call/apply conventions.

UPDATE:

If the previous methods fail, resorting to the "triangle of hackery" could be a viable option.

function triangleOfHackery(obj, methodName, args) {
  switch (args.length) {
    case 0: return obj[methodName]();
    case 1: return obj[methodName](args[0]);
    case 2: return obj[methodName](args[0], args[1]);
    case 3: return obj[methodName](args[0], args[1], args[2]);
    ...
  }
}

Answer 2

In the scenario where window.external is considered a host object, or originates from an extension mechanism that prefers not to expose its prototype to page logic, it may function as intended but lack the typical call and apply functionalities. Fortunately, you can still utilize call and apply as shown below:

Function.prototype.apply.call(window.external, null, [argumentsToExtension])

For a more abstract approach:

Function.prototype.apply.apply(window.external, [null, [argumentsToExtension]])

Here, the null parameter represents the value of this, which should effectively equate to window following the standard call/apply conventions.

UPDATE:

If the previous methods fail, resorting to the "triangle of hackery" could be a viable option.

function triangleOfHackery(obj, methodName, args) {
  switch (args.length) {
    case 0: return obj[methodName]();
    case 1: return obj[methodName](args[0]);
    case 2: return obj[methodName](args[0], args[1]);
    case 3: return obj[methodName](args[0], args[1], args[2]);
    ...
  }
}

Answer 3

Answer №2

There is actually a general solution available. Here is a simple example to illustrate:

function executeFunction (funcName, ...args) {
    var argStr = '';
    for (let i in args) {
        argStr += ', this.args[' + i + ']';
    }
    return (new Function('return window.external[\'' + funcName + '\'](' + argStr.substring(2) + ')')).bind({args})();
}

// create a circular structure that cannot be converted to a string:
const b = {}; b.b = b;

// make a function call:
executeFunction('bar', 10, 'xyz', new Date(), function(){}, b);

// equivalent to:
window.external.bar(10, 'xyz', new Date(), function(){}, b);

As shown, it is not necessary to ensure that the parameters are serializable.

The key is to properly define the context and assign all the parameters to that context.

ES6 syntax was used to improve the code's readability. To make it compatible with IE8, you can convert it to ES5 syntax and include an ES5 shim to support Function.prototype.bind. Alternatively, you can avoid using bind altogether:

EDIT: ES5 compatible version:

function executeFunction (funcName) {
    var argStr = '';
    for (var i=1; i<arguments.length; i++) {
        argStr += ', this.args[' + i + ']';
    }
    return {
        args: arguments,
        func: new Function('return window.external[\'' + funcName + '\'](' + argStr.substring(2) + ')')
    }.func();
}

Answer 4

There is actually a general solution available. Here is a simple example to illustrate:

function executeFunction (funcName, ...args) {
    var argStr = '';
    for (let i in args) {
        argStr += ', this.args[' + i + ']';
    }
    return (new Function('return window.external[\'' + funcName + '\'](' + argStr.substring(2) + ')')).bind({args})();
}

// create a circular structure that cannot be converted to a string:
const b = {}; b.b = b;

// make a function call:
executeFunction('bar', 10, 'xyz', new Date(), function(){}, b);

// equivalent to:
window.external.bar(10, 'xyz', new Date(), function(){}, b);

As shown, it is not necessary to ensure that the parameters are serializable.

The key is to properly define the context and assign all the parameters to that context.

ES6 syntax was used to improve the code's readability. To make it compatible with IE8, you can convert it to ES5 syntax and include an ES5 shim to support Function.prototype.bind. Alternatively, you can avoid using bind altogether:

EDIT: ES5 compatible version:

function executeFunction (funcName) {
    var argStr = '';
    for (var i=1; i<arguments.length; i++) {
        argStr += ', this.args[' + i + ']';
    }
    return {
        args: arguments,
        func: new Function('return window.external[\'' + funcName + '\'](' + argStr.substring(2) + ')')
    }.func();
}

The "apply" function in Javascript cannot be found in the window.external extension object

Answer №1

Answer №2

Similar questions

Tips for clearing text inputs in ReactJS

You can install the precise version of a package as mentioned in package.json using npm

How to Stop Element Flickering While Hovering in Selenium IE Webdriver

Discover the best practices for utilizing CSS selectors reliably in puppeteer

Can dates in the form of a String array be transmitted from the server to the client?

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

Ways to conceal a component based on a specific condition?

Having trouble with my getJSON function, can't pinpoint the error in my code

What is the best way to show a macOS progress pie loading icon alongside files?

Implementing React router for dynamic page rendering

Tips for converting the Instagram cURL post request to a JavaScript request

Provide the flow type parameter to the React component

To give an element a class in Javascript (without using jQuery) if it is currently hidden

Troublesome CSS Zoom causing issues with jQuery scrollTop

Encountering issues with link button redirection

AngularJS is not immediately responsive to changes in $window.document.visibilityState

Ways to apply CSS to a changing div ID

"Using only JavaScript to target and manipulate child elements within the

My changes to the HTML file are not being reflected in the browser, even after clearing the cache. This is happening in an Angular and Node.js application

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click