帆软iframe 嵌套页面，dom操作

最新推荐文章于 2025-04-08 11:10:20 发布

原创最新推荐文章于 2025-04-08 11:10:20 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #javascript

学习专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何通过JavaScript动态控制帆软报表中查询组件的显示与隐藏，并提供了一个简单的实现示例。此外，还讨论了解决因隐藏查询按钮导致无法直接展示报表的问题。

 // 显示帆软的查询组件的时候，动态控制是否显示
             this.$nextTick(() => {
               const iframe = window.frames.iFrame
               const handleLoad = () => {
                setTimeout(() => {
                   const Do = (iframe.contentWindow || iframe.contentDocument)
                   Do.document.getElementsByClassName('pmeter-container')[0].style.visibility = this.isDefaultSearch ? 'inherit' : 'hidden'
                   // Do.getWidgetByName('search').fireEvent('click')
                 }, 100)
               }
               iframe.addEventListener('load', handleLoad, true)
             })

注意要同源，iframe 不同源不能操作dom哦！这个是控制红色的框那块的隐藏和显示；

隐藏后有个问题就是没有了查询的按钮，帆软的默认是要点一下查询按钮才能出报表；

然后就找到了个参数 &__pi__=false；加上这个参数后，直接不显示那个查询红框框；