zhgdyunapp/utils/dom-polyfill.js
2025-09-11 18:14:57 +08:00

237 lines
7.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* DOM Polyfill for uniapp
* 为uniapp提供DOM API的polyfill解决document.getElementById等DOM操作不支持的问题
*/
// 检查是否在uniapp环境中
const isUniApp = typeof uni !== 'undefined'
// 如果不在H5环境且没有document对象创建polyfill
if (isUniApp && !window.document) {
console.log('Creating DOM polyfill for uniapp environment')
// 创建document对象
window.document = {
// 存储元素
_elements: {},
_elementIdCounter: 0,
// 创建元素
createElement: function(tagName) {
const element = {
tagName: tagName.toLowerCase(),
id: '',
className: '',
style: {},
parentNode: null,
childNodes: [],
innerHTML: '',
innerText: '',
textContent: '',
attributes: {},
appendChild: function(child) {
child.parentNode = this
this.childNodes.push(child)
},
removeChild: function(child) {
const index = this.childNodes.indexOf(child)
if (index > -1) {
this.childNodes.splice(index, 1)
child.parentNode = null
}
},
getAttribute: function(name) {
return this.attributes[name] || null
},
setAttribute: function(name, value) {
this.attributes[name] = value
if (name === 'id') {
this.id = value
window.document._elements[value] = this
}
},
addEventListener: function(event, handler) {
// 在uniapp中事件处理可能需要特殊处理
console.log(`Element ${this.tagName} listening for ${event}`)
},
removeEventListener: function(event, handler) {
console.log(`Element ${this.tagName} removed listener for ${event}`)
}
}
return element
},
// 根据ID获取元素
getElementById: function(id) {
return this._elements[id] || null
},
// 根据类名获取元素
getElementsByClassName: function(className) {
const elements = []
for (const id in this._elements) {
if (this._elements[id].className.includes(className)) {
elements.push(this._elements[id])
}
}
return elements
},
// 根据标签名获取元素
getElementsByTagName: function(tagName) {
const elements = []
for (const id in this._elements) {
if (this._elements[id].tagName === tagName.toLowerCase()) {
elements.push(this._elements[id])
}
}
return elements
},
// 查询选择器
querySelector: function(selector) {
// 简单的ID选择器支持
if (selector.startsWith('#')) {
return this.getElementById(selector.substring(1))
}
return null
},
querySelectorAll: function(selector) {
// 简单的ID选择器支持
if (selector.startsWith('#')) {
const element = this.getElementById(selector.substring(1))
return element ? [element] : []
}
return []
},
// 创建文本节点
createTextNode: function(text) {
return {
nodeType: 3,
nodeValue: text,
textContent: text
}
},
// 添加元素到body
body: {
appendChild: function(element) {
console.log('Appending element to body:', element.tagName)
// 在uniapp中可能需要特殊处理
}
},
// 文档状态
readyState: 'complete',
// 添加事件监听器
addEventListener: function(event, handler) {
console.log(`Document listening for ${event}`)
},
// 移除事件监听器
removeEventListener: function(event, handler) {
console.log(`Document removed listener for ${event}`)
}
}
// 创建body元素
window.document.body = window.document.createElement('body')
window.document.body.id = 'body'
window.document._elements['body'] = window.document.body
// 创建documentElement
window.document.documentElement = window.document.createElement('html')
window.document.documentElement.id = 'html'
window.document._elements['html'] = window.document.documentElement
console.log('DOM polyfill created successfully')
}
// 如果document存在但某些方法不存在补充这些方法
if (window.document) {
// 补充可能缺失的方法
if (!window.document.createElement) {
window.document.createElement = function(tagName) {
const element = {
tagName: tagName.toLowerCase(),
id: '',
className: '',
style: {},
parentNode: null,
childNodes: [],
innerHTML: '',
innerText: '',
textContent: '',
attributes: {},
appendChild: function(child) {
child.parentNode = this
this.childNodes.push(child)
},
setAttribute: function(name, value) {
this.attributes[name] = value
if (name === 'id') {
this.id = value
if (window.document._elements) {
window.document._elements[value] = this
}
}
}
}
return element
}
}
if (!window.document.getElementById) {
window.document.getElementById = function(id) {
if (window.document._elements) {
return window.document._elements[id] || null
}
return null
}
}
if (!window.document.body) {
window.document.body = window.document.createElement('body')
}
if (!window.document.documentElement) {
window.document.documentElement = window.document.createElement('html')
}
if (!window.document.readyState) {
window.document.readyState = 'complete'
}
}
// 确保window对象存在
if (typeof window === 'undefined') {
global.window = global
}
// 确保navigator对象存在
if (typeof navigator === 'undefined') {
global.navigator = {
userAgent: 'uniapp',
platform: 'uniapp'
}
}
// 确保location对象存在
if (typeof location === 'undefined') {
global.location = {
href: 'uniapp://',
protocol: 'uniapp:',
host: 'uniapp',
hostname: 'uniapp',
port: '',
pathname: '/',
search: '',
hash: ''
}
}
console.log('DOM polyfill loaded successfully')