在vue项目中展示外部链接页面

最新推荐文章于 2024-04-25 14:07:28 发布
最新推荐文章于 2024-04-25 14:07:28 发布
阅读量2.5k 收藏 7
点赞数
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyz_hd/article/details/120493481
版权

1、在vue项目中展示外部链接页面

 <div style="width: 100%;height: 100px;background-color: #00d1b2"></div>
 <div style="width: 100%;height: 500px;">
     <iframe style="width: 100%; height: 800px;" src="https://vue-js.com/learn-vue/lifecycle/initEvents.html#_2-%E8%A7%A3%E6%9E%90%E4%BA%8B%E4%BB%B6" allowfullscreen="allowfullscreen" frameborder="0" data-id="1"></iframe>
 </div>
cyz_hd
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE页面中加载外部HTML的示例代码
08-29
VUE页面中加载外部HTML的示例代码 本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，主要通过使用VUE的v-html指令来加载外部的HTML文件，并使用axios进行GET请求来获取外部HTML文件的内容。该示例代码中使用了...
在vue中实现嵌套页面(iframe)
10-15
首先，将要嵌入的`iframe`页面放置在Vue项目的静态资源目录下，比如`static`文件夹。这样可以确保在开发环境中，Vue CLI能正确地找到并加载这些页面。一个简单的`iframe`例子如下： ```html ;top: -300px;left: 0px...
Vue项目实现在线预览文件【超实用】
weixin_44590591的博客
07-13 5263
假设有一个Vue组件，需要显示一个文件的链接，并提供文件预览功能。
VUE页面中加载外部HTML
leveretz的博客
11-08 6175
VUE页面中加载外部HTML
vue项目中显示第三方外部链接的页面
最新发布
韩旭不会敲代码吧的博客
04-25 2555
vue项目中显示第三方外部链接的页面
vue 发布网页
weixin_34116110的博客
12-14 638
使用vue-cli工具可以大大提高我们的开发效率，作为小白的喔首先遇到的问题就是：我写到网页怎么发布到服务器呢？ Google一下找到一篇类似的回答，通过npm run build可以生成dist目录，打开目录可以发现里面有一个index.html文件，这就首页了，但是它并不支持直接在本地打开（不支持file）；但是问题来了，...
Vue项目/Web项目，进入页面加载超链接内容（已解决）
guochengabcd的博客
06-11 3133
废话不多说，直接上代码 <link :href="url" /> PS:（url为指定url超链接），是不是很简单
Vue3开发网页
热门推荐
m0_57249797的博客
06-07 3万+
Vue3+Typescript开发网页
在pycharm中开发vue的方法步骤
11-21
以下将详细解释如何在PyCharm中设置和使用Vue.js，以及Vue项目的目录结构、组件构成、路由配置、数据展示和前后台交互。 首先，为了在PyCharm中开发Vue项目，你需要按照以下步骤进行： 1. **安装Vue插件**：在...
html中嵌入vue3框架模板（过滤案例）
02-10
在HTML中嵌入Vue3框架模板，是一种将强大的Vue3前端框架应用于静态页面的方法，能够实现数据绑定、组件化和动态交互。Vue3是Vue.js的最新版本，它提供了更高效、更灵活的API和性能优化，使得在HTML中集成Vue3成为...
Pdfvuer用于Vue应用中的一个PDF查看器基于PDFjs封装
08-08
1. **基本使用**：在Vue项目中安装Pdfvuer通常通过npm或yarn完成，然后在组件中导入并使用。通过设置`src`属性，指定要加载的PDF文件URL，即可显示PDF文档。 2. **渲染控制**：Pdfvuer支持自定义渲染方式，可以通过...
VUE 聊天文本中的http及https链接实现可点击处理
许集贤
01-10 1753
项目需求，做一个聊天的软件，其中有个需求要识别聊天文本中的链接地址，并支持点击。 实现方法如下： 1.写一个函数接收文本内容，解析出其中的链接部分，并生成链接标签。 2.直接使用v-html展示解析完的标签内容。 上代码段： <div class="text-box" :key="index2" v-html="linkUrl(item2.text)"></div> 解析函数linkUrl： linkUrl(str){ if(
vue引入外部URL链接
Chona
02-28 4309
vue使用v-html引入外部URl链接
vue3 几种实现点击复制链接的方法
键指江湖的博客
03-20 1308
vue 点击复制链接的几种方法
vue中怎么显示第三方外部链接的页面 , 或显示后端返回的.html页面,.doc链接等
weixin_49577940的博客
11-17 8514
使用iframe标签可以在本地项目页面中嵌入外部页面 一 , template中 <iframe :src="this.txtUrl" frameborder="0" width="100%" :style="{height:calHeight}" scrolling="auto"></iframe> 二 , script中 data() { return { txtUrl: "http://wwww.baidu.c
VUE跳转外部链接和网页的方法
m0_71231013的博客
03-02 1万+
但是我们发现这样打开有时会出现一个很大的问题："我们打开的外部链接会自动拼接我们的源地址，导致网址链接不正确，无法正常访问"外部链接 b：打开方式（“_blank”新开一个窗口；“_self”覆盖当前窗口）1、有时我们在轮播图中会遇到点击图片进项跳转到第三方网站。2、或者拿到后端返回的url中要进行跳转。4.下面代码复制就能自己用！
vue项目中使用iframe嵌套外部链接页面的实现与应用
qq_32755875的博客
01-06 2万+
一. 应用需求 在vue开发项目的过程中，需要在自己的页面框架中，引用别人做的页面功能，但又不想直接跳转，失去整个系统的统一性，只想在这个子页面（子路由里跳转），那么如何实现呢？ 很简单！iframe就可以帮我们完成! 本文将以嵌入哔哩哔哩为例 二、实现过程 1、侧边栏的实现 以下代码都是在sideMenu.vue侧边栏组件中实现 1.1 template页面显示部分——为侧边栏绑定单击事件 <template> <div> <Menu :active-name="
vue中渲染html网页
大炮哥的博客
06-10 1万+
有的时候我们想在vue中直接显示一个html的网页，如果用富文本方式，那么内容就会太多，那么怎么处理呢? 直接上代码步骤一： 新建一个vue文件，命名为"HtmlPanel.vue"，内容如下 步骤二 使用上述的vue组件 在你的vue页面中添加如下代码 OK！就2个步骤，有帮助的话，麻烦点个赞。此外 如果遇到跨域，那么请到以下这篇文章 https://blog.csdn.net/u010775335/article/details/110857411HtmlPanel.vue中使用到的this.$http
怎样在vue3项目中，嵌套外部页面
07-14
在 Vue 3 项目中嵌套外部页面可以使用 `<iframe>` 元素。`<iframe>` 可以在 Vue 组件中嵌入外部页面，并在组件中显示该页面的内容。 下面是一个示例： 首先，在你的 Vue 组件中添加一个 `<iframe>` 元素，并设置其 `src` 属性为外部页面的 URL。例如： ```html <template> <div> <iframe :src="externalUrl" frameborder="0"></iframe> </div> </template> <script> export default { data() { return { externalUrl: 'https://example.com/external-page' } } } </script> <style> iframe { width: 100%; height: 500px; } </style> ``` 在上面的代码中，我们使用了一个 `externalUrl` 变量来存储外部页面的 URL。将其绑定到 `<iframe>` 的 `src` 属性上，使其显示外部页面的内容。 你可以根据需要调整 `<iframe>` 的样式，例如设置宽度和高度。 注意，由于浏览器的同源策略限制，加载的外部页面必须与你的项目位于同一域名下，否则可能会被阻止访问。 希望这个方法对你有帮助。如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值