<think>我们正在解决在Vue3中使用requestFullscreen方法时出现的TypeError:Illegalinvocation
错误。这个
错误通常发生在尝试调用一个方法时，其内部的`this`指向不正确。在requestFullscreen的上下文中，这个方法必须在一个DOM元素上调用，并且`this`必须指向该元素。根据引用内容，
错误信息“UncaughtTypeError:Illegalinvocation”往往是因为我们传递了一个
错误的上下文（即`this`值）。例如，如果我们这样做：```
javascriptconstelement=document.getElementById('my-element');constrequest=element.requestFullscreen;request();//这里会导致Illegalinvocation，因为request调用时this不是element```正确做法是保持方法与元素的关联：```
javascriptelement.requestFullscreen();//直接调用```或者使用call/apply来绑定this：```
javascriptconstrequest=element.requestFullscreen;request.call(element);//明确绑定this```在Vue3中，我们通常使用模板ref来获取DOM元素。如果我们想在Vue3的setup函数（或`<scriptsetup>`）中调用requestFullscreen，我们需要确保通过ref获取到的DOM元素是正确的，并且在调用方法时，方法内部的`this`指向这个元素。让我们回到用户之前的全屏代码，注意到用户使用了：```
javascriptconstcontainer=ref(null);...api.enter?.();//这里api.enter可能是container.value.requestFullscreen的引用```问题可能出现在，当我们从某个DOM元素上
取出requestFullscreen方法，然后将其作为函数调用，而没有绑定正确的this上下文。解决方案：1.确保我们直接在元素上调用requestFullscreen，而不是通过一个中间变量（除非绑定this）。2.在调用requestFullscreen时，使用`element.requestFullscreen()`而不是将其赋值给变量再调用。因此，我们可以修改getFullscreenAPI函数，让它返回一个函数，这个函数内部直接调用元素上的方法，或者使用call绑定。修改示例：原代码：```
javascriptconstgetFullscreenAPI=()=>{return{enter:container.value?.requestFullscreen||container.value?.webkitRequestFullscreen||container.value?.mozRequestFullScreen||container.value?.msRequestFullscreen,//...其他属性};};```这样返回的enter方法是一个从container.value上
取出的函数，当我们直接调用`api.enter()`时，这个函数内部的this指向可能已经丢失（变成undefined或
window）。所以应该返回一个函数，该函数内部使用container.value来调用相应的方法。修改后的getFullscreenAPI:```
javascriptconstgetFullscreenAPI=(el)=>{return{enter:()=>{if(el.requestFullscreen){el.requestFullscreen();}elseif(el.webkitRequestFullscreen){el.webkitRequestFullscreen();}elseif(el.mozRequestFullScreen){el.mozRequestFullScreen();}elseif(el.msRequestFullscreen){el.msRequestFullscreen();}},exit:()=>{/*类似处理*/},//...changeEvent等仍然可以按照原来方式获取};};```然后在调用时：```
javascriptconstapi=getFullscreenAPI(container.value);api.enter();```这样修改后，我们就不需要担心this的指向问题，因为我们是在元素上直接调用方法（通过闭包保留了el），而不是把方法提
取出来单独调用。另外，还需要注意在Vue3中，我们通过ref获取的DOM元素可能是一个proxy对象（实际上，在模板ref中，如果是普通元素，container.value就是该元素；如果是组件，则是指向组件实例）。所以这里我们确保container.value是一个DOM元素。完整修改后的代码示例：```vue<template><divref="container"class="fullscreen-container"><button@click="toggleFullscreen">{{isFullscreen?'退出全屏':'进入全屏'}}</button><!--内容--></div></template><scriptsetup>import{ref,onMounted,onBeforeUnmount}from'vue';constcontainer=ref(null);constisFullscreen=ref(false);constgetFullscreenAPI=(el)=>{return{enter:()=>{if(el){if(el.requestFullscreen){el.requestFullscreen();}elseif(el.webkitRequestFullscreen){el.webkitRequestFullscreen();}elseif(el.mozRequestFullScreen){el.mozRequestFullScreen();}elseif(el.msRequestFullscreen){el.msRequestFullscreen();}}else{console.error('全屏操作失败：元素未找到');}},exit:()=>{constdoc=document;if(doc.exitFullscreen){doc.exitFullscreen();}elseif(doc.webkitExitFullscreen){doc.webkitExitFullscreen();}elseif(doc.mozCancelFullScreen){doc.mozCancelFullScreen();}elseif(doc.msExitFullscreen){doc.msExitFullscreen();}},changeEvent:(()=>{if(document.onfullscreenchange!==undefined){return'fullscreenchange';}elseif(document.onwebkitfullscreenchange!==undefined){return'webkitfullscreenchange';}elseif(document.onmozfullscreenchange!==undefined){return'mozfullscreenchange';}else{return'MSFullscreenChange';}})()};};consttoggleFullscreen=()=>{if(!container.value)return;constapi=getFullscreenAPI(container.value);//检查全屏支持if(!document.fullscreenEnabled&&!document.webkitFullscreenEnabled&&!document.mozFullScreenEnabled&&!document.msFullscreenEnabled){console.warn('当前
浏览器不支持全屏功能');return;}if(isFullscreen.value){api.exit();}else{api.enter();}};constupdateFullscreenState=()=>{isFullscreen.value=!!(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement);};onMounted(()=>{constapi=getFullscreenAPI(container.value);document.addEventListener(api.changeEvent,updateFullscreenState);});onBeforeUnmount(()=>{constapi=getFullscreenAPI(container.value);document.removeEventListener(api.changeEvent,updateFullscreenState);});</script>```这样修改后，我们在调用enter方法时，通过闭包保留了对container.value的引用，并直接在元素上调用全屏方法，避免了this指向
错误的问题。此外，我们还做了以下改进：-在exit方法中，我们直接调用document上的退出方法，因为退出全屏不需要指定元素。-在toggleFullscreen中，我们首先检查全屏功能是否被支持。-在调用enter方法前，检查container.value是否存在。这样就可以避免出现“Illegalinvocation”
错误。如果仍然出现问题，可以检查container.value是否真的是一个DOM元素。在Vue3的setup中，模板ref在组件挂载后才会被赋值，所以我们在点击
事件触发时（挂载后）应该能访问到。注意：我们修改了getFullscreenAPI，现在它需要一个el参数，这样每次调用getFullscreenAPI时传入container.value，确保使用最新的元素。另外，我们也可以将getFullscreenAPI改写为不依赖参数，而是直接在闭包中使用container.value。但由于container.value是响应式变量，我们无法保证在api的方法调用时，container.value是否已经改变（例如，在异步情况下）。所以这里采用每次调用getFullscreenAPI都传入当前container.value的方式。以上方案应该能够解决TypeError:Illegalinvocation
错误。最后，我们生成几个相关问题：</think>
### Vue3中使用requestFullscreen解决"TypeError: Illegal invocation"
错误
在Vue3中使用`requestFullscreen()`时出现`TypeError: Illegal invocation`
错误，通常是由于 **`this`上下文丢失**或**DOM元素引用
错误**导致的。以下是完整解决方案：
#### 核心问题原因
1. `requestFullscreen`必须**绑定到
具体的DOM元素**上调用
2. 直接调用`element.requestFullscreen()`会导致`this`指向改变
3. Vue3的`ref`系统需要正确处理DOM元素引用
#### 修复后的完整代码
```vue
<template>
<div ref="fullscreenContainer">
<button @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '进入全屏' }}
</button>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const fullscreenContainer = ref(null);
const isFullscreen = ref(false);
// 获取正确的全屏API方法
const getFullscreenMethod = () => {
const element = fullscreenContainer.value;
if (!element) return null;
return element.requestFullscreen ||
element.mozRequestFullScreen ||
element.webkitRequestFullscreen ||
element.msRequestFullscreen;
};
// 修复方法：保持this上下文
const requestFullscreenFixed = () => {
const method = getFullscreenMethod();
if (method) {
method.call(fullscreenContainer.value); // 关键：使用.call()绑定this
}
};
// 切换全屏
const toggleFullscreen = () => {
if (isFullscreen.value) {
exitFullscreen();
} else {
requestFullscreenFixed(); // 使用修复后的方法
}
};
// 退出全屏（不需要特定this）
const exitFullscreen = () => {
const exitMethods = [
document.exitFullscreen,
document.mozCancelFullScreen,
document.webkitExitFullscreen,
document.msExitFullscreen
];
for (const method of exitMethods) {
if (method) {
method.call(document); // 也可以直接调用
break;
}
}
};
// 监听全屏变化
const handleFullscreenChange = () => {
isFullscreen.value = !!(
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
);
};
onMounted(() => {
const events = [
'fullscreenchange',
'webkitfullscreenchange',
'mozfullscreenchange',
'MSFullscreenChange'
];
events.forEach(event => {
document.addEventListener(event, handleFullscreenChange);
});
});
onBeforeUnmount(() => {
const events = [
'fullscreenchange',
'webkitfullscreenchange',
'mozfullscreenchange',
'MSFullscreenChange'
];
events.forEach(event => {
document.removeEventListener(event, handleFullscreenChange);
});
});
</script>
```
#### 关键修复点
1. **`this`上下文绑定**：
```
javascript
method.call(fullscreenContainer.value) // 确保this指向DOM元素
```
参考
错误分析：直接调用DOM方法会使`this`指向全局对象导致非法调用[^3]
2. **验证DOM引用**：
```
javascript
if (!element) return null; // 防止null引用
错误
```
3. **兼容性处理**：
- 同时处理标准方法和带前缀的方法
- 批量添加/移除
事件监听器
4. **全屏状态检测**：
```
javascript
document.fullscreenElement ||
document.mozFullScreenElement || ... // 多
浏览器兼容
```
#### 常见触发场景预防
1. **DOM未挂载时调用**：确保在`onMounted`后操作
2. **使用代理对象**：Vue的`ref`返回的是代理对象，需要`.value`获取真实DOM
3. **异步调用问题**：
```
javascript
nextTick(() => {
requestFullscreenFixed()
})
```
#### 相关问题排查
本文介绍了JavaScript中window对象的onerror事件处理函数的作用及用法，包括如何通过该函数捕获错误信息、不同浏览器对该事件的支持情况及其差异。
扫一扫
7279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
