两个iframe 在其中一个iframe中的el-dialog弹到顶级的body中
时间: 2024-02-01 10:13:56 浏览: 57
可以通过以下步骤将一个在 iframe 中的 el-dialog 弹框移到顶级的 body 中:
1. 获取 el-dialog 对应的 DOM 元素。
2. 获取顶层 window 对象,即最外层的 window。
3. 将 el-dialog 对应的 DOM 元素从当前 iframe 中移除,并添加到顶层 window 的 document.body 中。
代码示例:
```javascript
// 获取 el-dialog 对应的 DOM 元素
const dialogEl = document.querySelector('.el-dialog')
// 获取顶层 window 对象
const topWindow = window.top
// 将 dialogEl 从当前 iframe 中移除,并添加到顶层 window 的 document.body 中
topWindow.document.body.appendChild(dialogEl)
```
需要注意的是,如果弹框中有使用到 iframe 的相关内容,需要在移动前将 iframe 内的内容保存下来,并在移动到顶级 body 后再重新添加到弹框中。另外,由于涉及到跨域操作,可能会遇到安全策略的限制,需要确认浏览器是否允许跨域操作。
相关问题
两个iframe 在其中一个iframe中的el-dialog 层级提升
如果您想要在一个iframe中的el-dialog层级提升,可以尝试以下步骤:
1. 确保您已经在当前iframe中正确地引入了el-dialog组件。
2. 将el-dialog组件的z-index属性设置为较高的值。例如:
```
<el-dialog :visible="true" :z-index="9999">
<!-- 你的内容 -->
</el-dialog>
```
请确保将z-index属性设置为足够高的值,以确保el-dialog始终处于顶部。
3. 如果el-dialog仍然被其他元素覆盖,则可以考虑将iframe的z-index属性设置为更高的值。例如:
```
<iframe src="your-page.html" style="z-index: 9999;"></iframe>
```
这将确保当前iframe始终处于顶部,从而使el-dialog也处于顶部。
请注意,如果您的el-dialog层级提升问题与CSS样式冲突有关,则可能需要进一步调整CSS样式来解决问题。
左右各一个iframe 怎么把el-dialog 弹出到最外层的body上
可以使用 `appendTo` 属性将弹框挂载到指定的元素上。在弹框的 `created` 钩子函数中,可以通过获取最外层的 `body` 元素,然后将其作为 `appendTo` 的值,从而实现将弹框挂载到最外层的 `body` 上。
示例代码如下:
```html
<!-- 最外层的页面 -->
<template>
<div>
<iframe src="iframe1.html"></iframe>
<iframe src="iframe2.html"></iframe>
</div>
</template>
<script>
export default {
mounted() {
const dialog = this.$dialog({
title: '弹框标题',
content: '弹框内容',
appendTo: document.body // 将弹框挂载到最外层的 body 元素上
});
}
}
</script>
```
```html
<!-- iframe1.html -->
<template>
<div>
<button @click="showDialog">显示弹框</button>
</div>
</template>
<script>
export default {
methods: {
showDialog() {
const dialog = this.$dialog({
title: '弹框标题',
content: '弹框内容',
appendTo: parent.document.body // 将弹框挂载到最外层的 body 元素上
});
}
}
}
</script>
```
```html
<!-- iframe2.html -->
<template>
<div>
<button @click="showDialog">显示弹框</button>
</div>
</template>
<script>
export default {
methods: {
showDialog() {
const dialog = this.$dialog({
title: '弹框标题',
content: '弹框内容',
appendTo: parent.document.body // 将弹框挂载到最外层的 body 元素上
});
}
}
}
</script>
```
在子页面的弹框中,使用 `parent.document.body` 获取到父级页面的 `body` 元素,作为 `appendTo` 的值即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)