wpsjs 加载项,使用indexdb 时出现错误,是不支持?

完整示例如下:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>IndexedDB 示例</title>

<style>

body { font-family: Arial, sans-serif; padding: 20px; }

button { margin: 5px; padding: 8px 12px; background: #4CAF50; color: white; border: none; cursor: pointer; }

button:hover { background: #45a049; }

#output { margin-top: 20px; padding: 10px; border: 1px solid #ddd; }

</style>

</head>

<body>

<h2>图书数据库操作</h2>

<button onclick="addBook()">添加书籍</button>

<button onclick="getAllBooks()">显示所有书籍</button>

<button onclick="clearDatabase()">清空数据库</button>

<div id="output">操作结果将显示在这里...</div>

<script>

let db;

const dbName = "BookDB";

const storeName = "books";

// 初始化数据库

function initDB() {

const request = indexedDB.open(dbName, 2);

request.onerror = (event) => {

showOutput(`数据库错误: ${event.target.error}`);

};

request.onsuccess = (event) => {

db = event.target.result;

showOutput("数据库已连接");

};

request.onupgradeneeded = (event) => {

const db = event.target.result;

if (!db.objectStoreNames.contains(storeName)) {

const store = db.createObjectStore(storeName, {

keyPath: "id",

autoIncrement: true

});

store.createIndex("author", "author", { unique: false });

showOutput("数据库结构已创建");

}

};

}

// 添加示例书籍

function addBook() {

const transaction = db.transaction(storeName, "readwrite");

const store = transaction.objectStore(storeName);

const book = {

title: `图书 ${Math.floor(Math.random() * 100)}`,

author: ["张三", "李四", "王五"][Math.floor(Math.random() * 3)],

price: Math.floor(Math.random() * 100) + 20

};

const request = store.add(book);

request.onsuccess = () => {

showOutput(`已添加书籍: ${book.title}`);

};

request.onerror = (event) => {

showOutput(`添加失败: ${event.target.error}`);

};

}

// 获取所有书籍

function getAllBooks() {

const transaction = db.transaction(storeName, "readonly");

const store = transaction.objectStore(storeName);

const request = store.getAll();

request.onsuccess = (event) => {

const books = event.target.result;

if (books.length === 0) {

showOutput("数据库中没有书籍");

return;

}

const output = books.map(book =>

`ID: ${book.id}<br>

书名: ${book.title}<br>

作者: ${book.author}<br>

价格: $${book.price}<hr>`

).join("");

showOutput(`共找到 ${books.length} 本书籍:<br>${output}`);

};

}

// 清空数据库

function clearDatabase() {

const transaction = db.transaction(storeName, "readwrite");

const store = transaction.objectStore(storeName);

const request = store.clear();

request.onsuccess = () => {

showOutput("数据库已清空");

};

}

// 显示操作结果

function showOutput(message) {

const outputDiv = document.getElementById("output");

outputDiv.innerHTML = message;

}

// 页面加载时初始化

window.onload = initDB;

</script>

</body>

</html>

比如该html页面,独立运行功能正常,但如果使用为wpsjs加载项,

在ribbox.xml 中添加按钮:

<button id="btnIndexDb" label="存储" onAction="OnAction" getEnabled="OnGetEnabled" getImage="GetImage" visible="true" size="large"/>

在ribbon.js 中,使用dialog进行加载,

case "btnIndexDb":{

window.Application.ShowDialog(GetUrlPath() + "/ui/index_db.html","设置",600 * window.devicePixelRatio,800 * window.devicePixelRatio,false,false,2);

}

作为dialog打开时,点击添加按钮出现如下错误:

河南省
浏览 307
收藏
2
分享
2 +1
11
+1
全部评论 11
 
陈俊东

@金山办公

我们本地写过demo验证没问题,你的版本是?
· 广东省
回复
wps版本 12.1.0.21915,安装环境Windows 11 企业版 版本号为24H2, 在文字加载项中使用该html代码
· 河南省
回复