<template>
  <LayoutApp :title="title">
    <iframe ref="iframe" :onload="onload()" :src="url" class="page"></iframe>
  </LayoutApp>
</template>

<script>

export default {
  name: "IframePage",
  data() {
    return {
      show: false,
      title: '',
      // url: 'https://www.baidu.com',
      url: 'http://activity.yoho.cn/feature/6823.html?title=一键领取680元神劵&nodownload=1'
    };
  },
  mounted() {
    this.show = true;
  },
  methods: {
    onload() {
      setTimeout(() => {
        this.loadPage();
      }, 100)
    },
    loadPage() {
      console.log('onload');
      console.log({...this.$refs});
      if (!this.$refs.iframe) {
        return;
      }

      const elemIfram = this.$refs.iframe;

      const contentWindow = elemIfram.contentWindow;
      // const iframeDocument = contentWindow.document;
console.log(contentWindow)
      if (contentWindow.MutationObserver || contentWindow.webkitMutationObserver) {
        console.log(11)
          let observer;
          // chrome
          let callback = function(mutations) {
            mutations.forEach(function(mutation) {
              console.log(mutation.oldValue, mutation.target.src, mutation.target);
            });
          };
          if (contentWindow.MutationObserver) {
            observer = new MutationObserver(callback);
          } else {
            observer = new webkitMutationObserver(callback);
          }
          observer.observe(elemIfram, {
              attributes: true,
              attributeOldValue: true
          });
      } else if (elemIfram.addEventListener) {
        console.log(22)
          // Firefox, Opera and Safari
          elemIfram.addEventListener("DOMAttrModified", function(event){
            console.log(event.prevValue,event.newValue,event.target);
          }, false);
      }

      // console.log(iframeDocument.getElementsByTagName('a'));
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

</style>