Skip to content

Window Open Promise Reference

Coverage License NPM Version Open Issues Size

๐ŸชŸ Promised Window.open();.

Usage

๐Ÿ“ฆ Node

Install window-open-promise as a dependency:

Terminal window
1
pnpm add window-open-promise
2
# or
3
npm install window-open-promise
4
# or
5
yarn add window-open-promise

Import it and use it:

1
import { windowOpenPromise } from "window-open-promise";
2
3
const windowOpen = windowOpenPromise(globalThis);
4
5
windowOpen({
6
url: "https://example.com", // URL is not required, you can open a blank window
7
top: 10,
8
left: 10,
9
})
10
.then(newWindow => {
11
newWindow.console.log("This will log in the new window.");
12
newWindow.addEventListener("beforeunload", _event => {
13
console.log("This will log when the new window is closed.");
14
});
15
})
16
.catch(_error => {
17
console.error("This will log if the new window can't be opened.");
18
});

๐Ÿฆ• Deno

Import window-open-promise using the npm: prefix, and use it directly:

1
import { windowOpenPromise } from "npm:window-open-promise";
2
3
const windowOpen = windowOpenPromise(globalThis);
4
5
try {
6
const newWindow = await windowOpen({
7
url: "https://example.com", // URL is not required, you can open a blank window
8
top: 10,
9
left: 10,
10
});
11
newWindow.console.log("This will log in the new window.");
12
newWindow.addEventListener("beforeunload", _event => {
13
console.log("This will log when the new window is closed.");
14
});
15
} catch (_error) {
16
console.error("This will log if the new window can't be opened.");
17
}

๐ŸŒŽ Browser

Import window-open-promise using esm.sh, and use it directly:

1
<script type="module">
2
import { windowOpenPromise } from "https://esm.sh/window-open-promise";
3
4
const windowOpen = windowOpenPromise(globalThis);
5
6
try {
7
const newWindow = await windowOpen({
8
url: "https://example.com", // URL is not required, you can open a blank window
9
top: 10,
10
left: 10,
11
});
12
newWindow.console.log("This will log in the new window.");
13
newWindow.addEventListener("beforeunload", _event => {
14
console.log("This will log when the new window is closed.");
15
});
16
} catch (_error) {
17
console.error("This will log if the new window can't be opened.");
18
}
19
</script>

Type Aliases

WindowOpenPromiseFeatures

1
type WindowOpenPromiseFeatures: Omit<WindowOpenPromiseOptions, "replace" | "target" | "url">;

WindowOpenPromise features.


WindowOpenPromiseOptions

1
type WindowOpenPromiseOptions: object;

WindowOpenPromise options.

Type declaration

MemberTypeDescription
heightnumberWindowOpenPromise height (minimum 100).
leftnumberWindowOpenPromise left position.
menuBarbooleanWindowOpenPromise renders the menu bar.
noOpenerbooleanWindowOpenPromise canโ€™t access itโ€™s opener.
resizablebooleanWindowOpenPromise is resizable.
scrollbarsbooleanWindowOpenPromise has scrollbars.
targetstringWindowOpenPromise target.
titleBarbooleanWindowOpenPromise renders the title bar.
toolBarbooleanWindowOpenPromise renders the tool bar.
topnumberWindowOpenPromise top position.
urlstringWindowOpenPromise url.
widthnumberWindowOpenPromise width (minimum 100).

Functions

featureJoin()

1
function featureJoin<Item>(
2
iterable: Readonly<Iterable<Item>>,
3
): `${string},${string}`;

Joins given array of features with the FEATURE_SEPARATOR.

Type parameters

Type parameter
Item extends Strigifiable

Parameters

ParameterType
iterableReadonly<Iterable<Item>>

Returns

`${string},${string}`

Joint string.

Example

1
featureJoin(["top=10", "left=10", "resizable=1"]); // "top=10,left=10,resizable=1"

featureMap()

1
function featureMap(
2
iterable: Readonly<Iterable<EntryOf<WindowOpenPromiseFeatures>>>,
3
): Readonly<IterableIterator<string>>;

Maps array of feature entries to valid values.

Parameters

ParameterType
iterableReadonly<Iterable<EntryOf<WindowOpenPromiseFeatures>>>

Returns

Readonly<IterableIterator<string>>

Array of formatted features.

Example

1
featureMap([
2
["top", "10"],
3
["left", "10"],
4
["resizable", true],
5
]); // ["top=10", "left=10", "resizable=1"]

featureParser()

1
function featureParser(features?: WindowOpenPromiseFeatures): string;

Parses features object into features string.

Parameters

ParameterTypeDescription
features?WindowOpenPromiseFeaturesFeatures object.

Returns

string

Parsed string.

Example

1
featureParser({
2
top: 10,
3
left: 10,
4
resizable: true,
5
}); // "top=10,left=10,resizable=1"

featureValueMapper()

1
function featureValueMapper(value: unknown): number;

Takes a feature value and returns a formatted feature value.

Parameters

ParameterType
valueunknown

Returns

number

Feature value.

Example

1
featureValueMapper(true); // 1
2
featureValueMapper(false); // 0
3
featureValueMapper(13); // 13

windowOpenPromise()

1
function windowOpenPromise(
2
global: Readonly<Pick<Window, "open">>,
3
): (options: WindowOpenPromiseOptions) => Promise<Window>;

Promised Window.open.

Parameters

ParameterType
globalReadonly<Pick<Window, "open">>

Returns

Function

Curried function with window in context.

Curried function with window set.

Parameters
ParameterTypeDefault valueDescription
optionsWindowOpenPromiseOptionsEMPTY_OBJECTWindowOpenPromise options.
Returns

Promise<Window>

Promise with new window.

Example
1
const windowOpen = windowOpenPromise(window);
2
windowOpen({
3
url: "https://example.com",
4
top: 10,
5
left: 10,
6
})
7
.then(newWindow => {
8
newWindow.console.log("This will log in the new window.");
9
newWindow.addEventListener("beforeunload", _event => {
10
console.log("This will log when the new window is closed.");
11
});
12
})
13
.catch(_error => {
14
console.error("This will log if the new window can't be opened.");
15
});

Example

1
const windowOpen = windowOpenPromise(window);
2
windowOpen({
3
url: "https://example.com",
4
top: 10,
5
left: 10,
6
})
7
.then(newWindow => {
8
newWindow.console.log("This will log in the new window.");
9
newWindow.addEventListener("beforeunload", _event => {
10
console.log("This will log when the new window is closed.");
11
});
12
})
13
.catch(_error => {
14
console.error("This will log if the new window can't be opened.");
15
});