在网页中放到Base64编码文件,confirm提醒信息去除url

By admin in 4858美高梅 on 2019年3月29日

前些天写移动端项目用alert和confirm举办音讯提醒,但发今后iOS系统中,每一趟提醒新闻上边都会被添加一行U智跑L地址,安卓却绝非,经过查找之后,果然不出所料,包容!!兼容!!!包容!!!

大家兴许注意到了,网页上多少图片的src或css背景图片的url后边跟了一大串字符,比如:data:image/png;base64, iVBO途胜w0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGX兰德XC90FWH福睿斯Tb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYW本田CR-V5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFF奥迪Q50Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是什么样吗?那是Data
U奇骏I scheme。
Data UTucsonI
scheme是在福特ExplorerFC2397中定义的,指标是将有个别小的数据,直接嵌入到网页中,从而不用再从表面文件载入。比如上边那串字符,其实是一张小图片,将那几个字符复制黏贴到火狐的地方栏中并转到,就能来看它了,一张1X36的紫罗兰色png图片。
在上边的Data UOdysseyI中,data代表收获数据的缔约名称,image/png
是数据类型名称,base64
是数额的编码方法,逗号后面正是以此image/png文件base64编码后的多寡。
脚下,Data ULANDI scheme帮助的品种有:
在网页中放到Base64编码文件,confirm提醒信息去除url。data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64不难地说,它把一些 8-bit 数据翻译成标准 ASCII
字符,网上有许多免费的base64
编码和平解决码的工具,在PHP中得以用函数base64_encode() 进行编码,如echo
base64_encode(file_get_contents(‘wg.png’));
近来,IE八 、Firfox、Chrome、Opera浏览器都援助这种小文件嵌入。
举个图片的例子:
网页中一张图纸能够那样呈现:

世家大概注意到了,网页上有个别图片的src或css背景图片的url前边跟了一大串字符,比如:data:image/png;base64, iVBO陆风X8w0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXCR-VFWHRAV4Tb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWPAJERO5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFOdyssey0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是如何呢?那是Data
UMuranoI scheme。
Data U安德拉I
scheme是在酷威FC2397中定义的,目标是将某个小的数量,直接嵌入到网页中,从而不用再从表面文件载入。比如上面那串字符,其实是一张小图片,将那几个字符复制黏贴到火狐的地址栏中并转到,就能收看它了,一张1X36的深古铜黑png图片。

Data URI scheme。
Data U奥迪Q5I
scheme是在KugaFC2397中定义的,指标是将部分小的多少,直接嵌入到网页中,从而不用再从外表文件载入。比如上边那串字符,其实是一张小图片,将那么些字符复制黏贴到火狐的地点栏中并转到,就能观察它了,一张2*2的白色gif图片。
在地点的Data
ULX570I中,data代表收获数据的签订名称,image/gif是数据类型名称,base64
是数码的编码方法,逗号后边正是其一image/gif文件base64编码后的数码。
此时此刻,Data U宝马X3I scheme协助的档次有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
4858美高梅 ,data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64简单地说,它把部分 8-bit 数据翻译成标准 ASCII
字符,网上有诸多免费的base64
编码和平消除码的工具,在PHP中能够用函数base64_encode()
举行编码,如echo
base64_encode(file_get_contents(‘images/log.gif”’));
时下,IE八 、Firfox、Chrome、Opera浏览器都协理那种小文件嵌入。
举个图片的例子:
网页中一张图片可以那样展现:

内需重新alert和confirm,不赘述,,看代码!

<img src=“;

在上面的Data U大切诺基I中,data代表收获数据的签订名称,image/png
是数据类型名称,base64
是数量的编码方法,逗号后边正是这一个image/png文件base64编码后的数额。
时下,Data UOdysseyI scheme帮忙的品种有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64容易地说,它把一些 8-bit 数据翻译成标准 ASCII
字符,网上有为数不少免费的base64
编码和平解决码的工具,在PHP中得以用函数base64_encode() 举办编码,如echo
base64_encode(file_get_contents(‘wg.png’));
眼前,IE捌 、Firfox、Chrome、Opera浏览器都援救那种小文件嵌入。
举个图片的事例:
网页中一张图纸能够那样展现:

<img src=“;

alert重写

也足以如此展现:

<img src=“;

也可以这么展现:

<script type="text/javascript">  
var wAlert = window.alert;    
window.alert = function (message) {    
    try {    
        var iframe = document.createElement("IFRAME");    
        iframe.style.display = "none";    
        iframe.setAttribute("src", 'data:text/plain,');    
        document.documentElement.appendChild(iframe);    
        var alertFrame = window.frames[0];    
        var iwindow = alertFrame.window;    
        if (iwindow == undefined) {    
            iwindow = alertFrame.contentWindow;    
        }    
        iwindow.alert(message);    
        iframe.parentNode.removeChild(iframe);    
    }    
    catch (exc) {    
        return wAlert(message);    
    }    
}    
</script>  

<imgsrc=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

也足以如此展现:

<img src=“data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=”/>

confirm重写

咱们把图像文件的内容从来写在了HTML
文件中,那样做的补益是,节省了2个HTTP
请求。坏处呢,正是浏览器不会缓存那种图像。

<imgsrc=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

作者们把图像文件的始末一向写在了HTML 文件中,那样做的便宜是,节省了2个HTTP
请求。坏处呢,正是浏览器不会缓存那种图像。

<script>
var wConfirm = window.confirm;    
window.confirm = function (message) {    
    try {    
        var iframe = document.createElement("IFRAME");    
        iframe.style.display = "none";    
        iframe.setAttribute("src", 'data:text/plain,');    
        document.documentElement.appendChild(iframe);    
        var alertFrame = window.frames[0];    
        var iwindow = alertFrame.window;    
        if (iwindow == undefined) {    
            iwindow = alertFrame.contentWindow;    
        }    
        var result=iwindow.confirm(message);    
        iframe.parentNode.removeChild(iframe);    
        return result;  
    }    
    catch (exc) {    
        return wConfirm(message);    
    }    
}   

var r=confirm("Press a button");  
if (r==true)  
{  
    document.write("You pressed OK!");  
}  
else  
{  
    document.write("You pressed Cancel!");  
}  
</script> 

在线转换为Base64编码网站:

 

然后驾驭到html中data类型的url如下:

咱俩把图像文件的内容平昔写在了HTML
文件中,那样做的好处是,节省了多少个HTTP
请求。坏处呢,就是浏览器不会缓存那种图像。

html中data类型的url

data:,<文本数据>

data:text/plain,<文本数据>

data:text/html,<HTML代码>

data:text/html;base64,<base64编码的HTML代码>

data:text/css,<CSS代码>

data:text/css;base64,<base64编码的CSS代码>

data:text/javascript,<Javascript代码>

data:text/javascript;base64,<base64编码的Javascript代码>

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

在线转换为Base64编码网站:

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有