<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[(]&quot;(\S*)&quot;/g;
                      let backgroundImgs = html_src.match(backgroundUrlReg);
                      if (backgroundImgs.length) {
                          backgroundImgs.forEach(item => {
                              let url = item.replace(/url[(]&quot;/g, '').replace(/&quot;/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>