iframe无视跨域,将A网页嵌入到B网页展示

学到了新知识,
项目中打开弹窗需要展示A项目的页面信息,复制了A项目的代码,却一直没复现出来页面,最后用了iframe,好方便!

//页面引入
  <iframe id="cont" :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
//设置宽度高度
 mounted () {
    document.getElementById("cont").height = 1000 + 'px';
    document.getElementById("cont").height = 600 + 'px';
  },
//打开弹窗后触方法
openUrl (event) {
       this.$nextTick().then(() => {
           this.url = "http://A项目网址和参数   ";
         })
    },  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Web开发中,如果我们需要在一个页面中嵌入另一个不同域名的页面,就会涉及到跨域问题。一般情况下,浏览器会防止跨域请求,以保证网站的安全性。但是,在某些情况下,我们确实需要进行跨域嵌入页面的操作,例如使用iframe嵌入第三方网站的内容。 下面是一些常见的跨域嵌入页面的解决方案: 1. 使用代理 我们可以在自己的服务器上创建一个代理,通过代理来请求第三方网站的内容,然后将内容返回给前端页面。这种方法需要服务器端的支持,且对服务器的压力较大,但是能够解决绝大部分跨域问题。 2. 使用JSONP JSONP是一种跨域请求数据的方法,它利用了script标签可以跨域请求的特性。我们可以在页面中动态创建一个script标签,并设置src属性为第三方网站的API地址,同时在API地址中传递一个回调函数名,第三方网站将数据包装在回调函数中返回,前端页面就可以通过回调函数获取数据。 3. 使用CORS CORS是一种浏览器技术,它允许服务器在响应请求时设置Access-Control-Allow-Origin头部,告诉浏览器该请求是否允许跨域访问。如果第三方网站支持CORS,我们可以直接使用iframe嵌入页面。 4. 使用window.postMessage window.postMessage是一种跨域通信的方法,它可以让两个不同域名的页面进行通信。我们可以在iframe内部的页面中使用postMessage方法向父级页面发送消息,父级页面监听message事件并获取消息。通过这种方法,我们可以实现跨域嵌入页面,并进行双向通信。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值