对接口返回的html内容,将http改为https

== 关于网站https的判断==
Q:网站用http打开,那么所有的请求就以http发送,以https打开,请求就以https发送
这个时候就不能把网站的http或https写死,要根据打开的地址来确定是http还是https,来发送请求。

var ishttps = 'https:' == document.location.protocol ? true: false;
if(ishttps){
	//是https
	baseURL = 'https:'+ process.env.VUE_APP_BASE_URL;
}else{
   //是http
	baseURL = 'http:'+ process.env.VUE_APP_BASE_URL;
}

关于后台接口返回固定死的http地址如何修改成https
Q:遇到的情况是app手机端内的h5页面,只能用https才能访问,但目前全部都是http,如何处理呢?
分析:这个时候就不能简单的通过网站地址来判断是http还是https了,想的是把html里面的http或者https(以防万一),全部直接改变成http,如果后期根据网站地址来也可以根据网站地址来改。
1.首先想的是使用jQuery(对原生js不熟的人啊。。。),虽然在vue里面,但还是硬着头皮试一下:

$(".content img").each(function(){
    var src = $(this).attr("src");
    src = 'https:'+src.split(/\:/)[1];
    $(this).attr("src",src);
 })

感觉实现起来挺简单,本地将编辑器里面的内容填充进去,一试就可以了,但是外网里面看了一下,没有任何变化!!!
想了一下,估计是因为使用的vue语法渲染的页面

<div class="content" v-html="detail"></div>

那要页面渲染出来以后再使用JQuery,但是改变加载顺序以后发现在浏览器首页运行的还是jq,然后才渲染页面,又失败了!!!
没办法,只能想办法看可不可以在html代码上直接改掉,然后网上找了一圈,

var newContent= content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
  //capture,返回每个匹配的字符串
        var newStr='<img src="http://www.csghj.gov.cn'+capture+'" alt="" />';
         return newStr;
  });
   console.debug(newContent);

发现了这个(原地址:https://blog.csdn.net/burongwawa520/article/details/46562015),于是在这个基础上进行了=修改

var newContent = res.data.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
	console.log(capture)
	capture = 'https:'+capture.split(/\:/)[1];
	var newStr = '<img src="'+capture+'" />';
	return newStr;
})

this.detail = newContent;

问题完美解决,给自己撒花花~~,哈哈

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值