在Vue中使用iframe標簽來嵌入其他頁面是一種很常見的場景。但是,在很多情況下需要動態改變iframe所加載的地址,這時候就需要使用Vue來進行編程實現。
在Vue中,我們通常使用iframe標簽的方式跨域顯示外部頁面。以下是引入iframe標簽時,設置動態地址的代碼片段:
<template> <iframe :src="srcUrl" frameborder="0" scrolling="yes" width="100%" :height="iframeHeight" /> </template> <script> export default { data() { return { srcUrl: "", iframeHeight: "" }; }, mounted() { // 獲取地址 this.srcUrl = "https://xxx.com"; // iframe高度自適應 this.$nextTick(() =>{ this.iframeHeight = window.innerHeight - this.$el.offsetTop - 40; }); } }; </script>
以上代碼中,我們通過在mounted中監聽窗口變化來動態計算iframe的高度,從而實現自適應。以及通過設置srcUrl屬性來動態加載iframe的地址。
總之,以上代碼可用于Vue中動態設置iframe的地址和高度,實現跨域展示其他頁面的需求。