Commit e1adecce authored by caixingbing's avatar caixingbing

*

parent 591da3b3
/*
*
* 1、url地址,如企业详情:https://pre-plug.jiansheku.com/enterprise?ak=aec7b3ff2y2q8x6t49a7e2c463ce21912&uid=a704fb35bca54707b9b5f8c9bba57815(ak:平台唯一标识;uid:用户标识)
*
* */
const steerScroll = function (iframeId, navHeight, state, parentId){ //state:监听or移除监听;navHeight:页面排除iframe后剩下高度;iframeId: iframe的id
let dom = window
if(parentId){// 默认页面可以滚动
dom = document.getElementById(parentId)
dom.style.overflow = 'auto'
navHeight = 0
}else{
document.body.style.overflow = 'visible'
}
if(state){
window.addEventListener('message', function(e) {
const data = e.data
const sct = parentId ? dom.scrollTop : document && document.documentElement.scrollTop || document && document.body.scrollTop
if (data && typeof data === 'object') {
// 动态设置iFrame高度
if (data.height) {
document.getElementById(iframeId).style.height = data.height+'px'
scrolling(iframeId, navHeight, parentId) // 初始加载获取滚动条距离顶部高度
}
// 点击企业详情页 栏目名动态设置滚动高度
if (data.scrollHeight) {
dom.scrollTo(sct, parseInt(data.scrollHeight) + navHeight)
}
// 点击企业详情页 栏目下拉子标签动态设置滚动高度
if (data.clientHeight) {
dom.scrollTo(sct, sct - parseInt(data.clientHeight))
}
// 点击下拉子标签动态设置滚动高度
if (data.initHeight>=0) {
dom.scrollTo(sct, data.initHeight)
}
// 根据子页面弹窗显示隐藏控制当前页面是否固定不可滚动
if (data.scrollDisabled||data.scrollDisabled==false) {
if(parentId){
dom.style.overflow = data.scrollDisabled?'hidden':'auto'
}else{
document.body.style.overflow = data.scrollDisabled?'hidden':'visible'
}
}
}
})
dom.addEventListener('scroll', scrolling(iframeId, navHeight, parentId))
}else{
dom.removeEventListener('scroll', scrolling(iframeId, navHeight, parentId))
}
}
const scrolling = function (iframeId, navHeight, parentId){
// 滚动条距文档顶部的距离
let scrollTop = parentId ? document.getElementById(parentId).scrollTop : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 将滚动距离传入子组件
const ifa = document.getElementById(iframeId)
if(scrollTop<navHeight){
scrollTop = scrollTop+navHeight
}
ifa.contentWindow.postMessage({ 'scrollTop': scrollTop }, '*')
}
export {
steerScroll
}
<template>
<div v-loading="loading" class="app-container">
<iframe ref="companyIframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" :height="iframeHight" :src="src" />
<iframe id="companyIframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" :style="{height:iframeHight+'px'}" :src="src" />
</div>
</template>
<script>
import { steerScroll } from '@/assets/js/jskplug'
export default {
name: 'PartyB',
name: 'Company',
components: {
},
data() {
return {
loading: false, // 是否加载完成
loading: false, // 是否加载完成-当前页控制
iframeTimer: '', // 是否加载中定时器-当前页控制
iframeHight: window.innerHeight, // iframe高度-当前页控制
navHeight: 68, // iframe以为的高度px
iframeHight: window.innerHeight, // iframe高度
src: '',
domain: 'https://pre-plug.jiansheku.com',
// domain: 'http://192.168.60.30:3300',
ak: 'aec7b3ff2y2q8x6t49a7e2c463ce21912' // 需要携带的sdkId
......@@ -32,50 +35,23 @@ export default {
}
},
mounted() {
this.getInframeHight() // 实时控制iframe高度
window.addEventListener('scroll', this.scrolling) // 监听页面滚动事件
this.iframeLoading() // 判断iframe页面是否加载完成-当前页控制
steerScroll('companyIframe', this.navHeight, true) // 监听滚动(iframe的id、页面排除iframe后页面剩下高度[例:80]、增加监听[不传就是移除监听]、父级id[不带默认就是铺满整个页面]])
},
beforeDestroy() {
window.removeEventListener('scroll', this.scrolling) // 销毁页面滚动事件
clearInterval(this.iframeTimer) // -当前页控制
steerScroll('companyIframe', this.navHeight) // 销毁滚动
},
methods: {
getInframeHight() {
const _this = this
window.addEventListener('message', function(e) {
const data = e.data
const sc = document && document.documentElement.scrollTop || document && document.body.scrollTop
if (data && typeof data === 'object') {
// 动态设置iFrame高度
if (data.height) {
_this.iframeHight = data.height
_this.loading = false
//判断iframe页面是否加载完成-当前页控制
iframeLoading() {
let iframeHeight = document.getElementById("companyIframe").clientHeight, number = 0
this.iframeTimer = setInterval(()=>{
number ++
if(document.getElementById("companyIframe").clientHeight != iframeHeight || number == 5000){
this.loading = false
clearInterval(this.iframeTimer)
}
// 点击企业详情页 栏目名动态设置滚动高度
if (data.scrollHeight) {
window.scrollTo(sc, parseInt(data.scrollHeight) + _this.navHeight + 15)
}
// 点击企业详情页 栏目下子标签动态设置滚动高度
if (data.clientHeight) {
window.scrollTo(sc, sc - 30)
}
// 点击下拉子标签动态设置滚动高度
if (data.initHeight || data.initHeight===0) {
window.scrollTo(sc, data.initHeight)
}
// 根据子页面弹窗显示隐藏控制当前页面是否固定不可滚动
if (data.scrollDisabled) {
document.body.style.overflow = data.scrollDisabled
}
}
})
},
scrolling() {
// 滚动条距文档顶部的距离
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 准备传值
this.$nextTick(() => {
const ifa = this.$refs.companyIframe
ifa.contentWindow.postMessage({ 'scrollTop': scrollTop }, '*')
})
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment