Interface StandaloneWindow

The StandaloneWindow module provides a way to create a separate window to display custom content. You are able to control a full-sized webview inside the window, therefore you can use HTML, CSS, and advanced techniques like WebGL to render the contents.

Two modes are provided to load the window contents:

"Simple Mode": activated by calling standaloneWindow.simpleMode(). In this mode, you directly set the HTML and CSS contents of the overlay using standaloneWindow.setContent() and standaloneWindow.setStyle().
Loading a HTML page: activated by calling standaloneWindow.loadFile(). The HTML file should contain the CSS and JavaScript code to render the contents.

When activating either mode, the previous mode will be deactivated and the overlay will be cleared.

The window's webview has its own JavaScript context, which cannot access the IINA API directly. It can only communicate with the plugin script via iina.postMessage and iina.onMessage to exchange data. See API in Web Views for more information.

Example

// simple mode
standaloneWindow.simpleMode();
standaloneWindow.setContent(`<p>Hello World</p>`);
standaloneWindow.setStyle(`p { color: red; }`);
standaloneWindow.show();

// load a HTML file
standaloneWindow.loadFile("/path/to/sa-window.html");
standaloneWindow.show();

Available In Entry

Main and Global. Each entry can only create one standalone window, and their content and controls are isolated.

Hierarchy

StandaloneWindow

Index

Methods

open close loadFile simpleMode setStyle setContent setProperty setFrame postMessage onMessage

Methods

open

open(): void
Open the standalone window.

Returns void
- Defined in index.d.ts:1940

close

close(): void
Close the standalone window.

Returns void
- Defined in index.d.ts:1944

loadFile

loadFile(path: string): void
Clear the overlay contents and load a HTML file into the overlay. The HTML file should contain the CSS and JavaScript code to render the contents. It is possible to put the JavaScript code in a separate file and load it using a <script> tag. The webpage can communicate with the Internet using standard methods like fetch, but it cannot access the IINA API directly. It should use iina.postMessage and iina.onMessage to exchange data with the plugin script. See API in Web Views for more information.
Parameters
- path: string
  
  The path to the HTML file, related to the plugin root directory.
Returns void
- Defined in index.d.ts:1955

simpleMode

simpleMode(): void
Clear the window contents and activate the "Simple Mode". In the simple mode, you directly set the HTML and CSS contents of the overlay from the plugin script.

Returns void
- Defined in index.d.ts:1960

setStyle

setStyle(style: string): void
(Simple Mode Only) Set the CSS style of the standalone window. The CSS string will be put into a <style> tag at the end of <head>. The suggested usage is to call setStyle once when activating the simple mode, and then use setContent (probably multiple times) to update the contents.
```
<head>
   ...
   <style> [inserted here] </style>
</head>
```
An error will be raised if the overlay is not in simple mode.
Parameters
- style: string
  
  The CSS string.
Returns void
- Defined in index.d.ts:1976

setContent

setContent(content: string): void
(Simple Mode Only) Set the HTML content of the standalone window. The HTML string will be put into a <div> tag inside <body>, with class content.
```
<body>
   <div class="content"> [inserted here] </div>
</body>
```
An error will be raised if the overlay is not in simple mode.
Parameters
- content: string
  
  The HTML string.
Returns void
- Defined in index.d.ts:1990

setProperty

setProperty(props: Partial<{
    title: string;
    resizable: boolean;
    hudWindow: boolean;
    fullSizeContentView: boolean;
    hideTitleBar: boolean;
}>): void
Set various properties of the standalone window.
Parameters
- props: Partial<{
      title: string;
      resizable: boolean;
      hudWindow: boolean;
      fullSizeContentView: boolean;
      hideTitleBar: boolean;
  }>
  Properties of the standalone window.
  - title: the title of the window.
  - resizable: whether the window is resizable.
  - hudWindow: whether the window is a HUD window, like IINA's Inspector window. This option will also make the window have translucency and vibrancy background effects.
  - fullSizeContentView: whether the window has a full size content view, that is, the content view is not inset by the title bar.
  - hideTitleBar: whether the window should hide the title bar.
Returns void
- Defined in index.d.ts:2002

setFrame

setFrame(w?: number, h?: number, x?: number, y?: number): void
Set the frame of the standalone window, allowing to resize and move it. Specify null to keep the current value.
Parameters
- Optional w: number
  
  The width of the window.
- Optional h: number
  
  The height of the window.
- Optional x: number
  
  The x coordinate of the window.
- Optional y: number
  
  The y coordinate of the window.
Returns void
- Defined in index.d.ts:2019

postMessage

postMessage(name: string, data: any): void
Post a message to the standalone window. The JS environment inside the window also has two methods, iina.postMessage and iina.onMessage, to exchange data with the plugin script. See API in Web Views for more information.
Parameters
- name: string
  
  The message name.
- data: any
  
  The message data.
Returns void
- Defined in index.d.ts:2033

onMessage

onMessage(name: string, callback: ((data: any) => void)): void
Register a listener for messages posted by the standalone window. The JS environment inside the window also has two methods, iina.postMessage and iina.onMessage, to exchange data with the plugin script. See API in Web Views for more information.
Parameters
- name: string
  
  The message name.
- callback: ((data: any) => void)
  
  The callback to be called when a message with the given name is received.
  - - (data: any): void
    - Parameters
      
      data: any
      
      The message data, posted by the JS script inside the overlay webview.
      
      Returns void
Returns void
- Defined in index.d.ts:2042

Interface StandaloneWindow

Example

Available In Entry

Hierarchy

Index

Methods

Methods

open

Returns void

close

Returns void

loadFile

Parameters

path: string

Returns void

simpleMode

Returns void

setStyle

Parameters

style: string

Returns void

setContent

Parameters

content: string

Returns void

setProperty

Parameters

props: Partial<{ title: string; resizable: boolean; hudWindow: boolean; fullSizeContentView: boolean; hideTitleBar: boolean; }>

Returns void

setFrame

Parameters

Optional w: number

Optional h: number

Optional x: number

Optional y: number

Returns void

postMessage

Parameters

name: string

data: any

Returns void

onMessage

Parameters

name: string

callback: ((data: any) => void)

Parameters

data: any

Returns void

Returns void

Settings

Member Visibility

Theme

props: Partial<{
title: string;
resizable: boolean;
hudWindow: boolean;
fullSizeContentView: boolean;
hideTitleBar: boolean;
}>

`Optional` w: number

`Optional` h: number

`Optional` x: number

`Optional` y: number