HTTPS站点引入有道划词

无意间发现有道提供的api中有个网页模块,其中就有一个可以在网站中添加划词功能的api,于是就试着申请了一个把它放在自己的博客里,但是我却发现在使用https访问的时候访功能会无法使用,但使用http方式的时候却是正常的,但是由于众所周知的原因,在境内我的博客是无法使用http方式访问的(而且我也已经将所有http访问的方式跳转到https了),所以如果无法在https下使用的话那么这个功能对于我的博客就是毫无作用的

之所以这个功能无法在https站点下使用是因为有道所提供的链接是http的,而在https站点里引用外部http资源浏览器默认会将其屏蔽掉,网上找到的一种方法是将链接的http去掉,这样便可以兼容http与https,但我发现这种方法对于有道的翻译api是没有作用的,经过测试发现原因在于引用的链接内(一个js)还会有引用,显而易见地,这里面的引用的链接也是http的,所以既然我们将有道提供给我们的代码中的链接修改为https或者https兼容的也无法对其完全引用,为了能够最大程度地对其引用我下载了这段js(有道翻译api提供的代码中的链接是一段外部js链接),然后将段js代码保存至网站并修改其中所有http链接为https链接,但是问题还是依旧,经过测试发现http://shared.ydstatic.com这个链接在使用https访问的时候出现了问题,但侥幸的是这段js里对该链接引用只有两个,一个css文件,一个png图片文件,于是我再次下载了这两个文件并将它们保存在网站里,接着将引用这两个文件的地方进行修改,把引用的地址改为我的网站,再次进行测试发现划词翻译已经可以正常使用了,但还是会有个小问题,那就是翻译的时候界面的显示还是有点小问题,不过好在影响并不大,只是边框的颜色以及有道的图标无法显示而已,原因在于dict.youdao.com中有引用shared.ydstatic.com的链接,这次是无法解决的了,因为这个链接在有道的网站,我们无权修改,不过已经不影响使用了。

下面我再说一下具体的方法,第一步,下载有道api提供的代码中的js代码
申请完有道api后会提供一段代码,这段代码需要我们嵌入到我们的网站中,这段代码大概是这个样子的

从中可以看到引用的外部链接是http://fanyi.youdao.com/openapi.do?keyfrom=&key=&type=selector&version=1.2&translate=on
我们下载这段js代码,并将其放在我们的网站的某个目录里,比如js目录里,保存为youdao.js
第二步,我们查看这个文件,从中找到http://shared.ydstatic.com/api/1.0/selector.css和http://shared.ydstatic.com/api/1.0/switcher.png
我们同样也要下载这两个文件,保存在我们的网站的某个目录里,比如css目录和image目录里,保存为selector.css和switcher.png
接着修改文件,将http://shared.ydstatic.com/api/1.0/selector.css替换成我们下载的css,同样的将http://shared.ydstatic.com/api/1.0/switcher.png替换成我们下载的png文件,比如我们的网站地址是https://briskblog.eu.org,那么就分别替换成
//briskblog.eu.org/css/selector.css
//briskblog.eu.org/image/switcher.png
这里没有添加http也没有添加https,据说这样可以兼容http与https
第三步,将youdao.js这个文件中所有http链接更改为https链接或者是兼容的链接形式
最后只需要将有道提供的这段代码中引用的js链接改成我们修改过后的链接即可

–阅读次数(27)

发表评论

电子邮件地址不会被公开。

*