vue嵌入第三方页面几种常见方法

<template>
  <div class="iframe-container">
    <iframe
      src="https://www.example.com"
      width="100%"
      height="600px"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
</template>
<style scoped>
.iframe-container {
  /* 容器样式 */
  overflow: hidden;
}
</style>

<template>
  <div>
    <embed-url url="https://www.example.com" />
  </div>
</template>
<script>
import Embed from 'vue-embed'
export default {
  components: {
    Embed
  }
}
</script>

<template>
  <div id="third-party-container"></div>
</template>
<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://www.example.com/script.js';
    script.onload = () => {
      // 脚本加载完成后可以进行其他操作
      // 例如，初始化第三方脚本
      if (window.initializeThirdParty) {
        window.initializeThirdParty();
      }
    };
    document.body.appendChild(script);
  }
}
</script>

<template>
  <div>
    <custom-element></custom-element>
  </div>
</template>
<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://www.example.com/custom-element.js';
    document.head.appendChild(script);
  }
}
</script>