Vue组件内嵌iframe元素实战教程

"这篇文章主要展示了如何在Vue组件中使用iframe元素来实现页面内展示外部链接，同时保持当前页面地址栏不变。" 在Vue.js中，我们经常需要在组件中嵌入外部网页内容，这时就可以利用HTML的iframe元素。Vue组件中使用iframe可以方便地将第三方网站或应用集成到我们的应用中，而不会影响主页面的URL。以下是一个简单的示例代码，详细解释了如何在Vue组件中设置和控制iframe： 首先，我们创建一个Vue组件模板，包含一个ul列表，每个列表项都是一个链接，以及一个隐藏的iframe元素： ```html <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul> <li v-for="item in webAddress"> <a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{ item.name }}</a> </li> </ul> <iframe v-show="iframeState" id="show-iframe" frameborder="0" name="showHere" scrolling="auto" src=""></iframe> </div> </template> ``` 在模板中，`<a>`标签的`target`属性设置为"showHere"，这使得点击链接时会在名为"showHere"的iframe中打开。同时，`@click`事件调用了`showIframe`方法，用于显示iframe。 接下来是组件的JavaScript部分： ```javascript <script> export default { name: 'hello', data() { return { iframeState: false, goBackState: false, webAddress: [ { name: 'segmentFault', link: 'https://segmentfault.com/a/1190000004502619', }, { name: '博客', link: 'http://vuex.vuejs.org/', }, { name: '特效', link: 'http://www.yyyweb.com/377.html', }, ], }; }, mounted() { const oIframe = document.getElementById('show-iframe'); const deviceWidth = document.documentElement.clientWidth; const deviceHeight = document.documentElement.clientHeight; oIframe.style.width = deviceWidth + 'px'; oIframe.style.height = deviceHeight + 'px'; }, methods: { showIframe() { this.iframeState = true; }, goBack() { this.iframeState = false; this.goBackState = false; }, }, }; </script> ``` 在`data`中定义了`iframeState`用来控制iframe是否显示，以及`webAddress`数组，包含要链接的外部网站信息。 `mounted`钩子函数用于初始化iframe的宽度和高度，这里使用了`document.documentElement.clientWidth`和`clientHeight`来获取设备的屏幕宽度和高度，然后设置给iframe，确保其充满整个视口。 `methods`对象包含了两个方法：`showIframe`用于切换iframe的显示状态，当点击链接时调用；`goBack`用于隐藏iframe并返回初始状态，通常在用户点击“返回”按钮时调用。 这个示例中，当用户点击链接时，iframe会显示并加载对应的链接内容，而页面的URL保持不变。通过这种方法，可以在Vue组件中优雅地整合外部资源，提供良好的用户体验。同时，还可以根据需求进一步优化，例如添加加载指示器、错误处理等。