237 lines
7.2 KiB
JavaScript
237 lines
7.2 KiB
JavaScript
/**
|
||
* 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') |