当前位置： 首页 > news >正文

沈阳市住房和城乡建设厅网站/百度平台营销

news 2025/6/30 18:37:19
沈阳市住房和城乡建设厅网站,百度平台营销,做网站项目后台的,自己做网站好做吗一、刷新iframe页面iframe的地址没有改变的话&#xff0c;每打开一次iframe页面&#xff0c;都不会主动更新页面的。以下有几种方法&#xff0c;都可以实现&#xff0c;每打开一次页面&#xff0c;就刷新一下给iframe添加key<template><div id"Iframe">&…

一、刷新iframe页面

iframe的地址没有改变的话，每打开一次iframe页面，都不会主动更新页面的。

以下有几种方法，都可以实现，每打开一次页面，就刷新一下

  1. 给iframe添加key

<template><div id="Iframe"><el-dialogappend-to-bodystyle="margin-top: -10vh"custom-class="scrollbar":visible.sync="iframeVisible"width="90%"@close="close"><iframe:key="key"id="iframe"ref="iframeBox":src="url"frameborder="0"width="100%"sandbox="allow-forms allow-scripts allow-same-origin allow-popups":style="{ height: calHeight }"scrolling="auto"></iframe></el-dialog></div>
</template><script>
import { mapGetters } from "vuex";
import { getToken, setToken } from "@/utils/auth";export default {name: "Iframe",computed: {...mapGetters(["userid", "name"]),//计算属性 , 设置iframe高度为窗口高度少100pxcalHeight() {return window.innerHeight - 150 + "px";},},props: {url: String,dataid: String,},data() {return {iframeVisible: false,key: new Date().getTime(),};},watch: {// 方法一：// iframe上添加key，然后监听$route: {handler(val) {this.key = new Date().getTime();},immediate: true,},},
};
</script>

  1. 给iframe的src中的地址添加时间戳

<template><div id="Iframe"><el-dialogappend-to-bodystyle="margin-top: -10vh"custom-class="scrollbar":visible.sync="iframeVisible"width="90%"@close="close"><iframeid="iframe"ref="iframeBox":src="url"frameborder="0"width="100%"sandbox="allow-forms allow-scripts allow-same-origin allow-popups":style="{ height: calHeight }"scrolling="auto"></iframe></el-dialog></div>
</template><script>
import { mapGetters } from "vuex";
import { getToken, setToken } from "@/utils/auth";export default {name: "Iframe",computed: {...mapGetters(["userid", "name"]),//计算属性 , 设置iframe高度为窗口高度少100pxcalHeight() {return window.innerHeight - 150 + "px";},},props: {url: String,dataid: String,},data() {return {iframeVisible: false,};},watch: {url(newVal, oldVal) {if (getToken()) {// 方法二this.iframeInit(newVal);}},},methods: {//iframe 初始化iframeInit(newVal) {let iframe = document.createElement("iframe");//利用异步延迟加载和链接随机传参来达到刷新iframe缓存的目的，不加此步骤iframe页面不更新this.forceUpdataIframe(iframe, newVal);},//强制刷新iframe缓存forceUpdataIframe(iframe, newVal) {setTimeout(() => {let fresh_link =new Date().getTime() + Math.floor(Math.random() * 1000000); //获取当前时间戳String.prototype.splice = function (start, newStr) {return this.slice(0, start) + newStr + this.slice(start);};let strIndex = newVal.indexOf("/#/");let url = newVal.splice(strIndex, "?time=" + fresh_link);console.log("url", url);iframe.src = url;// window.open(newVal + "?time=" + fresh_link, "refresh_name");}, 300);},},
};
</script>

二、iframe是在弹窗中的，当我在iframe中的页面点击按钮后，需关闭iframe所在弹窗

其实就是子组件关闭父组件的弹窗，但是这是在iframe中操作的，所以不能用之前的方法

父组件（放置iframe的页面）

<template><div id="Iframe"><el-dialogappend-to-bodystyle="margin-top: -10vh"custom-class="scrollbar":visible.sync="iframeVisible"width="90%"@close="close"><iframe:key="key"id="iframe"ref="iframeBox":src="url"frameborder="0"width="100%"sandbox="allow-forms allow-scripts allow-same-origin allow-popups":style="{ height: calHeight }"scrolling="auto"></iframe></el-dialog></div>
</template><script>
import { mapGetters } from "vuex";
export default {name: "Iframe",computed: {...mapGetters(["userid", "name"]),//计算属性 , 设置iframe高度为窗口高度少100pxcalHeight() {return window.innerHeight - 150 + "px";},},props: {url: String,dataid: String,},data() {return {iframeVisible: false,key: new Date().getTime(),};},watch: {// iframe上添加key，然后监听$route: {handler(val) {this.key = new Date().getTime();},immediate: true,},},mounted() {// 注册监听框架传来的数据this.$nextTick(() => {// 在外部 Vue 的 window 上添加 postMessage 的监听，并且绑定处理函数 handleMessagewindow.addEventListener("message", this.handleMessage);});},destroyed() {// 注意移除监听！window.removeEventListener("message", this.handleMessage);},methods: {close() {this.iframeVisible = false;},handleMessage(event) {if (event) {this.iframeVisible = event.data;} else {this.iframeVisible = true;}},},
};
</script><style lang="scss">
#Iframe {width: 100%;//   height: 100%;// padding: 0 10vw;z-index: -1 !important;.el-dialog__header {background-color: transparent !important;padding: 0;}.el-dialog__body {background-color: #f9fafc;border-radius: 10px;padding: 40px 50px 30px;height: calc(100vh - 80px);overflow: hidden;overflow-y: scroll;&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角，即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}}.el-dialog__headerbtn .el-dialog__close {color: #909399;width: 50px;height: 30px;line-height: 30px;border-radius: 5px;background-color: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);}// 发起新的弹窗.dialog-footer {height: 50px;line-height: 50px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-top: 20px;}.dialog-header {height: 60px;line-height: 60px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-bottom: 20px;padding: 0 10px;font-size: 16px;font-weight: 600;}.center {display: flex;width: 100%;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;padding: 20px;}
}
.scrollbar {width: 100%;//   height: 100%;// padding: 0 10vw;z-index: -1 !important;.el-dialog__header {background-color: transparent !important;padding: 0;}.el-dialog__body {background-color: #f9fafc;border-radius: 10px;padding: 40px 50px 30px;height: calc(100vh - 80px);overflow: hidden;overflow-y: scroll;&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角，即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}}.el-dialog__headerbtn .el-dialog__close {color: #909399;width: 50px;height: 30px;line-height: 30px;border-radius: 5px;background-color: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);}// 发起新的弹窗.dialog-footer {height: 50px;line-height: 50px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-top: 20px;}.dialog-header {height: 60px;line-height: 60px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-bottom: 20px;padding: 0 10px;font-size: 16px;font-weight: 600;}.center {display: flex;width: 100%;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;padding: 20px;}
}
</style>

子组件（iframe中跳转的页面）

<template><div id="GetFrom"><el-button size="small" class="addbtn" @click="sub()">保存</el-button ></div>
</template><script>
export default {methods: {sub() {window.parent.postMessage(false, "*"); //关闭iframe所在的弹窗},},
};
</script>

三、iframe已经加载完毕，但是进度条还一直加载中

  1. 其他软件会影响iframe

我遇到的情况是，我这边没有任何问题，其他人也没有，但是又一个人就是遇到进度条一直在加载中，后来发现是因为他电脑上的小狐狸钱包在后台运行，所以影响到了iframe，把它关掉就可以了。

四、iframe传参并跳转页面

我这里是点击按钮，出现iframe页面，iframe是封装在弹窗中的，你们用的话直接在页面中使用iframe，然后跳转就行，就不一定要封装iframe了。
这里我就把主要代码贴出来

使用页面传递参数

<template><div id="EditDialog"><el-dialogappend-to-bodycustom-class="dialog":title="title.appname":visible.sync="dialog"width="90%"style="margin-top: -10vh"><divstyle="display: inline; margin: 0 5px"v-for="(obj, ind) in List.button":key="ind"><el-buttonv-if="obj.type === 3"size="small"class="Cancelbtn"@click="newpage(obj)">{{ obj.name }}</el-button></div></el-dialog><!-- 新页面 --><Iframe ref="Iframe" :dataid="Form.dataid" :url="url"></Iframe></div>
</template><script>
import { mapGetters } from "vuex";
import Iframe from "@/views/dashboard/Iframe/Iframe.vue";
import { AddComments, Reject,Confirm,BpmUrge,BpmBack,BPMALL} from "@/api/Bpm";export default {data() {return {dialog: false,url: "", //给iframe的地址 };},methods: {//打开iframe页面newpage(obj) {// obj.add_url后端返回的是这样的：http://192.168.4.160:9528/#/Generation?dataid={dataid}//其中http://192.168.4.160:9528是在开发阶段就是我们前端运行的地址，项目部署后，就是后端正式的地址//  /#/Generation是页面//dataid是参数，需要我们赋值的if (obj.add_url) {const a = obj.add_url.replace(/{dataid}/, this.Form.dataid);obj.add_url = a; //绝对路径，也就是http://192.168.4.160:9528开头this.url = a;//注意使用这种方法iframe需要加sandbox="allow-forms allow-scripts allow-same-origin allow-popups"，不然会全屏//this.List.add_url = `/#/Generation`;//相对路径}this.$refs.Iframe.iframeVisible = true;//打开组件的弹窗},}
}
</script>

iframe组件

<template><div id="Iframe"><el-dialogappend-to-bodystyle="margin-top: -10vh"custom-class="scrollbar":visible.sync="iframeVisible"width="90%"@close="close"><iframe:key="key"id="iframe"ref="iframeBox":src="url"frameborder="0"width="100%"sandbox="allow-forms allow-scripts allow-same-origin allow-popups":style="{ height: calHeight }"scrolling="auto"></iframe></el-dialog></div>
</template><script>
import { mapGetters } from "vuex";
import { getToken, setToken } from "@/utils/auth";export default {name: "Iframe",computed: {...mapGetters(["userid", "name"]),//计算属性 , 设置iframe高度为窗口高度少100pxcalHeight() {return window.innerHeight - 150 + "px";},},props: {url: String,dataid: String,},data() {return {iframeVisible: false,key: new Date().getTime(),};},watch: {$route: {handler(val) {this.key = new Date().getTime();},immediate: true,},},mounted() {// 注册监听框架传来的数据this.$nextTick(() => {// 在外部 Vue 的 window 上添加 postMessage 的监听，并且绑定处理函数 handleMessagewindow.addEventListener("message", this.handleMessage);});},destroyed() {// 注意移除监听！window.removeEventListener("message", this.handleMessage);},methods: {close() {this.iframeVisible = false;},handleMessage(event) {if (event) {this.iframeVisible = event.data;} else {this.iframeVisible = true;}},},
};
</script><style lang="scss">
#Iframe {width: 100%;//   height: 100%;// padding: 0 10vw;z-index: -1 !important;.el-dialog__header {background-color: transparent !important;padding: 0;}.el-dialog__body {background-color: #f9fafc;border-radius: 10px;padding: 40px 50px 30px;height: calc(100vh - 80px);overflow: hidden;overflow-y: scroll;&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角，即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}}.el-dialog__headerbtn .el-dialog__close {color: #909399;width: 50px;height: 30px;line-height: 30px;border-radius: 5px;background-color: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);}// 发起新的弹窗.dialog-footer {height: 50px;line-height: 50px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-top: 20px;}.dialog-header {height: 60px;line-height: 60px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-bottom: 20px;padding: 0 10px;font-size: 16px;font-weight: 600;}.center {display: flex;width: 100%;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;padding: 20px;}
}
.scrollbar {width: 100%;//   height: 100%;// padding: 0 10vw;z-index: -1 !important;.el-dialog__header {background-color: transparent !important;padding: 0;}.el-dialog__body {background-color: #f9fafc;border-radius: 10px;padding: 40px 50px 30px;height: calc(100vh - 80px);overflow: hidden;overflow-y: scroll;&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角，即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}}.el-dialog__headerbtn .el-dialog__close {color: #909399;width: 50px;height: 30px;line-height: 30px;border-radius: 5px;background-color: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);}// 发起新的弹窗.dialog-footer {height: 50px;line-height: 50px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-top: 20px;}.dialog-header {height: 60px;line-height: 60px;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;flex-wrap: wrap;margin-bottom: 20px;padding: 0 10px;font-size: 16px;font-weight: 600;}.center {display: flex;width: 100%;background: #fff;box-shadow: 2px 2px 6px rgba(138, 169, 192, 0.2);border-radius: 5px;padding: 20px;}
}
</style>

iframe要跳转到的页面，接收参数

data() {return {dataid: "", //编辑弹窗传递的参数};},
created() {// 获取父级中iframe的src，这样就可以获取参数this.dataid = window.parent.document.getElementById("iframe").src.split("=")[1];},

这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下呗

http://www.jmfq.cn/news/5023837.html

相关文章：

  • 深圳创业补贴申请流程/seo网页优化服务
  • 郑州网站优化托管/鄂州网站seo
  • 郑州商城网站制作/百度客服电话24小时
  • 哪里做网站比较稳定/百度站长工具怎么关闭
  • wordpress 中文响应式/百度seo新站优化
  • 网站规划与网页设计第四版电子书/站长工具国色天香
  • dw是网页制作平台吗/网站seo排名公司
  • 威联通如何做网站/长沙网站设计
  • 网店托管公司/网站关键词优化排名
  • 杭州萧山区专门做网站的公司/如何让百度收录网址
  • 网站建设 风险/百度seo在哪里
  • 个人备案域名做企业网站/上海关键词排名优化公司
  • 淘宝客做网站怎么做/电子商务网络营销
  • wordpress 如何修改like和dislike/网络优化工程师是干什么的
  • 网站开发费用算无形资产/河南做网站优化
  • java做的网站php/深圳百度快照优化
  • 深圳市网站建设公司排名/搜索引擎营销sem包括
  • 专业的广州手机网站/google关键词工具
  • html5企业网站模板/宁德市自然资源局
  • 电子商务网站建设理论依据/百度网站怎么提升排名
  • 郑州电商网站建设/高端网站建设制作
  • 网站后台管理系统制作软件/今日国际新闻最新消息十条
  • 自己做电影网站需要什么/seo排名哪家正规
  • 西宁网站建设的公司/网络营销专业的就业方向
  • 河南专业网站建设公司/百度95099如何转人工
  • 上海企乐网站制作公司/百度账号登录不了
  • 网站建设是做什么的/百度问答首页
  • 北辰做网站公司/关键词搜索排名优化
  • 定制网站需要多少钱/seo1短视频网页入口营销
  • 手机端设计/网站seo视频狼雨seo教程