138 lines
4.1 KiB
Vue
138 lines
4.1 KiB
Vue
<template>
|
||
<div class="greenPop">
|
||
<div class="close">
|
||
<img src="../assets/images/close.png" style="position: absolute;right:0" @click="close"/>
|
||
</div>
|
||
<div class="content">
|
||
<iframe id="iFrame" :src="greenUrl" style="height: 100%;width:100%" frameborder="0" scrolling="yes" ></iframe>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
export default {
|
||
name:'greenPop',
|
||
props:{
|
||
greenUrl:{
|
||
type: String,
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
url:'https://mp.weixin.qq.com/s/6HClPULGCNGgtIUpvdhpIg'
|
||
}
|
||
},
|
||
mounted(){
|
||
// this.initUrl();
|
||
},
|
||
methods:{
|
||
close(){
|
||
this.$parent.componentShow = "";
|
||
this.$parent.modelOthers = false;
|
||
},
|
||
initUrl(){
|
||
//微信的文章地址
|
||
//调用跨域API
|
||
let realurl = 'https://cors-anywhere.herokuapp.com/' + this.url;
|
||
let that = this;
|
||
axios.get(realurl).then(response=>{
|
||
console.log(response,'response');
|
||
if (response) {
|
||
let html = response;
|
||
html = html.replace(/data-src/g, "src")
|
||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '')
|
||
.replace(/https/g, 'http');
|
||
//根据微信传回的html中的特殊路径data-src转为src等
|
||
let html_src = html;
|
||
let iframe = document.getElementById('iFrame');
|
||
iframe.src = html_src;
|
||
//这时候就成功拿到了微信公众号，这个html_src是个静态网页
|
||
let doc = iframe.contentDocument || iframe.document;
|
||
|
||
let head = doc.querySelector("head");
|
||
let meta = `<meta name="referrer" content="never">`;
|
||
head.innerHTML += meta;
|
||
//添加meta展示图片
|
||
|
||
let backgroundUrlReg = /url[(]"(\S*)"/g;
|
||
let backgroundImgs = html_src.match(backgroundUrlReg);
|
||
if (backgroundImgs.length) {
|
||
backgroundImgs.forEach(item => {
|
||
let url = item.replace(/url[(]"/g, '').replace(/"/g, '');
|
||
let img = document.createElement('img');
|
||
img.src = url;
|
||
doc.querySelector("body").appendChild(img);
|
||
});
|
||
}
|
||
//配置无效img绕过背景图片路径限制
|
||
|
||
doc.write(html_src);
|
||
// 将静态页面写入iframe中
|
||
setTimeout(() => {
|
||
that.height = doc.documentElement.scrollHeight;
|
||
}, 500);
|
||
//通过延时获取文档高度赋值Iframe去除滚动条，根据实际情况增加延时时间
|
||
doc.getElementById("js_content").style.visibility = "visible";
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.greenPop{
|
||
width: 20%;
|
||
height: 85%;
|
||
position: absolute;
|
||
background: rgb(5,53,45);
|
||
-webkit-animation: fadeInDown 0.3s;
|
||
animation: fadeInDown 0.3s;
|
||
top: 11%;
|
||
.close{
|
||
height: 5%;
|
||
width: 100%;
|
||
// color: #ffffff;
|
||
// background: url("../assets/images/twoTitle.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
font-size: 18px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.content{
|
||
height: calc(100% - 5%);
|
||
width: 100%;
|
||
}
|
||
}
|
||
/**
|
||
下拉显示动画效果
|
||
*/
|
||
@keyframes fadeInDown {
|
||
0% {
|
||
-webkit-transform: translate3d(0, -20%, 0);
|
||
transform: translate3d(0, -20%, 0);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: none;
|
||
transform: none;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeInDown {
|
||
0% {
|
||
-webkit-transform: translate3d(0, -20%, 0);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: none;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style> |