All Products
Search
Document Center

Drive and Photo Service:JavaScript widgets

Last Updated:Dec 22, 2025

This topic describes the JavaScript widgets that are supported by Drive and Photo Service (PDS).

1. Overview

PDS supports the following JavaScript widgets:

PageWidget

PageWidget provides some methods for developers to embed PDS BasicUI pages in their own web applications by using iframes, such as the personal space page shown in the following figure.

image

WebOfficeWidget/VideoPlayerWidget

WebOfficeWidget/VideoPlayerWidget provides some methods for developers to embed document preview/editing pages or video playback pages in their own web applications by using iframes. This simplifies the development process. The following figure shows an example of a document preview page.

image

2. Use the widgets

(1) Enable BasicUI in the console

Log on to the PDS console. On the domain details page, allow BasicUI to access the domain resources.

image

Click Manage to go to the admin console of BasicUI.

image

(2) Configure the frame-ancestors policy in the BasicUI admin console

In the BasicUI admin console, configure the frame-ancesotrs policy to include the source information of the parent page, such as https://yoursite.com. A widget can be embedded only by the configured parent page.

image

(3) Import a widget

Run the following command: npm install aliyun-pds-js-widget.

import { PageWidget, WebOfficeWidget, VideoPlayerWidget } from 'aliyun-pds-js-widget';

(4) Initialize the widget

const widgetOpts = {
    ... // The configuration item. See the details below.
}
const ins = new PageWidget(widgetOpts);

(5) See the following topics for more information about how to use each widget