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打开时,点击添加按钮出现如下错误:
@金山办公