王新阳

wangxinyang

HTML AUDIO/VIDEO DOM事件

当音频/视频处于加载过程中时，会依次发生以下事件：

1、loadstart
当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。

2、durationchange
当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。 当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

3、loadedmetadata
当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。

4、loadeddata
当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。

5、progress
当浏览器正在下载指定的音频/视频时，会发生 progress 事件。

6、canplay
当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。

7、canplaythrough
当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

回应

图片放大镜 - drift.js

https://github.com/imgix/drift

http://www.htmleaf.com/jQuery/Image-Effects/drift-luminous-javascript-zoom-on-hover.html


简要教程

这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式：鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果，并且还可以将这两种放大镜效果结合在一起使用。

 安装

可以通过NPM或Bower来安装Drift插件。

npm install drift-zoom
bower install drift               

 使用方法

 Luminous鼠标点击放大镜效果

下载压缩包，在页面中引入Luminous.js和luminous-basic.css文件。

<link rel="stylesheet" media="screen, projection" href="dist/luminous-basic.css">             
<script src="dist/Luminous.js"></script>               

Luminous放大镜效果的HTML结构是使用一个超链接元素来包裹一张图片，超链接的地址是高清大图的地址，图片指向的是缩略图。

<a class="demo-trigger" href="img/wristwatch.jpg">
  <img src="img/wristwatch-thumb.jpg">
</a>               

完成上面的操作之后，可以通过下面的JS代码来进行初始化。

var demoTrigger = document.querySelector('.demo-trigger');
new Luminous(demoTrigger);               
 Drift鼠标滑过放大镜效果

下载压缩包，在页面中引入Drift.js和drift-basic.css文件。

<link rel="stylesheet" media="screen, projection" href="dist/drift-basic.css">             
<script src="dist/Drift.js"></script>               

Drift图片放大镜的HTML结果和Luminous放大镜的区别是它使用data-zoom属性来作为高清大图。

<img class="demo-trigger"
     src="img/wristwatch-thumb.jpg"
     data-zoom="img/wristwatch-hd.jpg">               

初始化Drift图片放大镜插件。

var demoTrigger = document.querySelector('.demo-trigger');
new Drift(demoTrigger);              
 结合使用Luminous和Drift

Luminous和Drift图片放大镜效果可以结合在一起使用。例如DEMO3的HTML结构如下：

<div class="wrapper">
  <a class="demo-trigger" href="img/vintagecameras-hd.jpg">
    <img src="img/vintagecameras-thumb.jpg">
  </a>
 
  <div class="detail">
    <section>
      <h1>......</h1>
      <p>......</p>
    </section>
  </div>
</div>               

初始化的方法如下：

var demoTrigger = document.querySelector('.demo-trigger');
new Drift(demoTrigger, {
    paneContainer: document.querySelector('.detail'),
    inlinePane: 900,
    inlineOffsetY: -85,
    containInline: true,
    sourceAttribute: 'href'
});
new Luminous(demoTrigger);               

 配置参数

  • namespace：生成元素的class名称前缀。默认值：null。
  • showWhitespaceAtEdges：当接近边部时ZoomPane是否显示白边，默认值是false。
  • containInline：内部的ZoomPane是否在内部。默认值为false。
  • inlineOffsetX，inlineOffsetY：How much to offset the ZoomPane from the interaction point when inline.
  • sourceAttribute：用于指向大图的属性，默认值为：data-zoom。
  • zoomFactor：图片放大倍数。默认值为3。
  • paneContainer：添加到非内部放大镜上面的DOM元素。默认值为：document.body。
  • inlinePane：合适切换到内部放大镜模式。这个取值可以是一个布尔值或一个整数。如果为true，将一直是内部放大镜模式，如果为false，将在`windowWidth <= inlinePane时切换到内部放大镜模式。默认值为375。
  • handleTouch：如果为true，touch事件将被启用。
  • onShow：ZoomPane显示时触发。
  • onHide：ZoomPane隐藏时触发。
  • injectBaseStyles：在页面中添加基本的样式。

回应

什么是反向代理？如何预防被反向代理？

转自:https://blog.csdn.net/star_yt/article/details/52982407

什么是反向代理？

什么是反向代理？

先说说正向代理的概念：

正向代理，也就是传说中的代理，他的工作原理就像一个跳板。简单的说，我是一个用户，我访问不了某网站，但是我能访问一个代理服务器。这个代理服务器呢，他能访问那个我不能访问的网站，于是我先连上代理服务器，告诉他我需要那个无法访问网站的内容，代理服务器去取回来，然后返回给我。从网站的角度，只在代理服务器来取内容的时候有一次记录，有时候并不知道是用户的请求，也隐藏了用户的资料，这取决于代理告不告诉网站。

结论就是，正向代理是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

那么反向代理的概念呢？

比如用户访问 http://www.xxx.com/books/list这个页面，但www.xxx.com实际上并不存在这个页面，他是偷偷从另外一台服务器上取回来，然后作为自己的内容吐给用户。

但用户并不知情，这很正常，用户一般都很笨。这里所提到的 www.xxx.com 这个域名对应的服务器就设置了反向代理功能。

结论就是反向代理正好相反，对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容原本就是它自己的一样。

区别 / 总结：

正向代理：客户端知道服务端，通过代理端连接服务端。代理端代理的是客户端。
反向代理：所谓反向，是对正向而言的。服务端知道客户端，客户端不知道服务端，通过代理端连接服务端。代理端代理的是服务端。代理对象恰好相反，故名反向代理

恶意反向代理的危害

网站被恶意反向代理有什么危害呢？这里列举一下：

•首先肯定会占用服务器资源，网站打开速度受影响。
•其次，别人通过代理盗用你的网站数据，对用户与不是那么智能的搜索引擎而言，相当于建了一个与你一模一样的站点，那么很有可能你的站点会进搜索引擎沙箱，甚至被降权。
•如果被恶意代理的页面，还挂有你的联盟广告（比如Adsense），这就十分危险了，如果有人点击了上面的广告，很容易被Adsense封号。

如何预防网站被反向代理？

JS 代码预防
<script type="text/javascript">
if (document.domain != 'xxx.com' && document.domain != 'www.xxx.com'){
 window.location.href='http://www.xxx.com/';
}
</script>


PHP 代码预防
$url = $_SERVER['SERVER_NAME'];
if( $url!= 'xxx.com' || $url!= 'www.xxx.com' ) 
{
 echo '非法反向代理访问';
 //header('Location: http://www.xxx.com/');
 exit;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
    , Roboto, Noto, Arial, , sans-serif; font-size: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow-wrap: break-word;">先说说正向代理的概念：

    正向代理，也就是传说中的代理，他的工作原理就像一个跳板。简单的说，我是一个用户，我访问不了某网站，但是我能访问一个代理服务器。这个代理服务器呢，他能访问那个我不能访问的网站，于是我先连上代理服务器，告诉他我需要那个无法访问网站的内容，代理服务器去取回来，然后返回给我。从网站的角度，只在代理服务器来取内容的时候有一次记录，有时候并不知道是用户的请求，也隐藏了用户的资料，这取决于代理告不告诉网站。

    结论就是，正向代理是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

    那么反向代理的概念呢？

    比如用户访问 http://www.xxx.com/books/list这个页面，但www.xxx.com实际上并不存在这个页面，他是偷偷从另外一台服务器上取回来，然后作为自己的内容吐给用户。

    但用户并不知情，这很正常，用户一般都很笨。这里所提到的 www.xxx.com 这个域名对应的服务器就设置了反向代理功能。

    结论就是反向代理正好相反，对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容原本就是它自己的一样。

    区别 / 总结：

    正向代理：客户端知道服务端，通过代理端连接服务端。代理端代理的是客户端。
    反向代理：所谓反向，是对正向而言的。服务端知道客户端，客户端不知道服务端，通过代理端连接服务端。代理端代理的是服务端。代理对象恰好相反，故名反向代理

    恶意反向代理的危害

    网站被恶意反向代理有什么危害呢？这里列举一下：

    •首先肯定会占用服务器资源，网站打开速度受影响。
    •其次，别人通过代理盗用你的网站数据，对用户与不是那么智能的搜索引擎而言，相当于建了一个与你一模一样的站点，那么很有可能你的站点会进搜索引擎沙箱，甚至被降权。
    •如果被恶意代理的页面，还挂有你的联盟广告（比如Adsense），这就十分危险了，如果有人点击了上面的广告，很容易被Adsense封号。

    如何预防网站被反向代理？

    JS 代码预防
<script type="text/javascript">
if (document.domain != 'xxx.com' && document.domain != 'www.xxx.com'){
 window.location.href='http://www.xxx.com/';
}
</script>


PHP 代码预防
$url = $_SERVER['SERVER_NAME'];
if( $url!= 'xxx.com' || $url!= 'www.xxx.com' ) 
{
 echo '非法反向代理访问';
 //header('Location: http://www.xxx.com/');
 exit;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

      回应

      禁止网站被别人通过iframe引用嵌套套入

      转自：https://aisoa.cn/post-2117.html

      由于嵌入iframe的嵌入 使得网站变的更不安全， 如何能防止网页禁止被iframe嵌入呢？

      首先看下知名网站使用的方法

      <script type="text/javascript">
document.domain="qq.com";var _s_=new Date(),g_T={},siDomain="ctc.qzonestyle.gtimg.cn",g_iUin=499469859,g_iLoginUin=499469859;g_T.fwp=[_s_];document.namespaces&&document.namespaces.add&&(document.namespaces.add('qz', 'http://qzone.qq.com/'),document.namespaces.add('x', 'http://qzone.qq.com/'));var QZFL={};QZFL.event={};QZFL.event.getEvent=function(evt){var evt=window.event||evt,c,cnt;if(!evt&&window.Event){c=arguments.callee;cnt=0;while(c){if((evt=c.arguments[0])&&typeof(evt.srcElement)!="undefined"){break;}else if(cnt>9){break;}c=c.caller;++cnt;}}return evt;};QZFL.event.getTarget=function(evt){var e=QZFL.event.getEvent(evt);if(e){return e.srcElement||e.target;}else{return null;}};var QZFF_M_img_ribr=[];QZFL.media={reduceImgByRule:function(ew,eh,opts,cb){QZFF_M_img_ribr.push(QZFL.event.getTarget());},adjustImageSize:function(w,h,trueSrc,cb,errCallback){QZFF_M_img_ribr.push(QZFL.event.getTarget());},reduceImage:function(){QZFF_M_img_ribr.push(QZFL.event.getTarget());},getImageInfo:function(){QZFF_M_img_ribr.push(QZFL.event.getTarget());}};g_T.fwp[1] = new Date();</script>

      这个是腾讯QQ空间使用的防嵌套方法

      if(window.top !== window.self){ window.top.location = window.location;}

      这个是淘宝使用的方法

      这个要说下，其实今天要介绍，四种防iframe的方法

      第一种要说的就是淘宝使用的办法

      解决方案一：js方法

      <script type="text/javascript">
if(self != top) { top.location = self.location; }
</script>
      if (self == top) {
    var theBody = document.getElementsByTagName('body')[0];
    theBody.style.display = "block";
} else {
    top.location = self.location;
}

      上面两种方法都是可以的

      把上面的JS代码片段放到你页面的 head 中即可。

      要特别说明下这种方法不是很靠谱，可以很轻松使这种方法失效。

      只需要添加下面代码使JS代码失效，这种方法就没用了。

      <script type="text/javascript" charset="utf-8">
document.write('<iframe seamless sandbox security="restricted" id="url_mainframe" frameborder="0" scrolling="yes" name="main" src="http://aisoa.cn" style="height:100%; visibility: inherit; width: 100%; z-index: 1;overflow: visible;"></iframe>');
</script>//把里面的http://aisoa.cn换成要嵌套的网址

      解决方案二：Meta标签方法

      在需要禁用iframe嵌套的网页head中添加下面代码

      <meta http-equiv="X-FRAME-OPTIONS" content="DENY">

      以上两种为前端处理方法，就我个人来说不推荐使用，不过这个也是因人而异的，没有绝对的好与差。

      解决方案三：PHP方法

      <?php header('X-Frame-Options:Deny'); ?>

      在需要禁用iframe嵌套的PHP网页中添加上面代码

      上面这种是后端程序处理方法。

      解决方案四：Apache主机方法

      配置 Apache 在所有页面上发送 X-Frame-Options 响应头，需要把下面这行添加到 'site' 的配置中:

      Header always append X-Frame-Options SAMEORIGIN

      解决方案五：Nginx主机方法

      配置 nginx 发送 X-Frame-Options 响应头，把下面这行添加到 'http', 'server' 或者 'location' 的配置中:

      add_header X-Frame-Options "SAMEORIGIN";

      配置 IIS 发送 X-Frame-Options 响应头

      添加下面的配置到 Web.config 文件中:

      <system.webServer>
  ...
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>
  ...
</system.webServer>

      解决方案六：.htaccess方法

      在网站根目录下的.htaccess文件中中加一句

      Header append X-FRAME-OPTIONS "SAMEORIGIN"

      以上几种解决方案为服务器端解决方案。

      回应(1)

      使用原生JS修改css属性

      修改style样式：
      1. 通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式；
      2. 修改特定元素节点的style内容cssText可以一次性修改多个css属性style.attrName 修改单个属性 attrName的值
      3. 通过setAttribute 修改style属性值

      <style>
.test {font-size: 30px;color: blue;background-color: blueviolet}
</style>
// html
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
// js
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式: 
stylesheetBtn.addEventListener('click', function(e) {
    var stylesheet = document.styleSheets[0];
    stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
    testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
    testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
    testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false);


      回应

      ajax上传-基于html5 FormData的批量文件上传

      参考：https://www.cnblogs.com/imwtr/p/5924042.html
      转自：https://blog.csdn.net/sinat_34492035/article/details/80477858

      不使用FormData，直接用 <input type="file" name="file" multiple> 也可以实现批量上传。本例是ajax方式多个文件同时上传，也可以基于FormData采用ajax循环上传多个文件。更多功能可通过理解下面的原理自行扩展。

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{
            list-style:none;
        }
        ul{
            width:700px;
            border:2px solid red;
            padding:10px;
        }
        .clearfix:after{
            display: block;
            content:'';
            overflow: hidden;
            visibility: hidden;
            clear: both;
            height:0;
        }
        .content ul li{
            float:left;
            width:100px;
            height:100px;
            margin:0 10px;
            border:1px solid #ccc;
        }
        .addFile{
            background:url("../img/icon12.png") no-repeat;
            background-position: center center;
        }
        #attach{
            width:100%;
            height:100%;
            opacity:0;
        }
    </style>
</head>

<body>
    <form action="formData_test.php" id="form">
        <div class="content">
            <ul class="clearfix ul-box">
                <li class="addFile">
                    <input type="file" id="attach"  multiple require />
                </li>
            </ul>
        </div>
        <input type="text" name="name"/>
        <input type="text" name="age"/>
        <input type="text" name="sex"/>
        <input type="button" value="上传" class="subBtn"/>
    </form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    //定义一个数组 把文件数组的值给新数组  对新数组进行操作  然后把新数组传递给后台
    var curFiles = [];
    $("#attach").change(function(){
        var fileArr = $(this)[0].files;
        Array.prototype.push.apply(curFiles, fileArr);
//      var fileArr = this.files;
        console.log(fileArr);
        //这里展示的话  还是用fileArr
        for(var i=0;i<fileArr.length;i++){
            console.log(fileArr[i]);
            var item = fileArr[i];
            var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+
                    "<p>大小："+(item.size/1024).toFixed(2)+"KB</p></li>");
            $(".ul-box").prepend(abc);
        }
//      fileArr.map(function(item,index,arr){
//          var abc=$("<li><p>文件名:"+item.name+"</p>"+
//                  "<p>大小："+parseInt(item.size/1024)+"KB</p></li>");
//          $(".ul-box").prepend(abc);
//      })

})  
$(".ul-box").on("click",".showf",function(){
    var index = $(".showf").index($(this));
    alert(index);
    var name = $(this).find("p").eq(0).html();
    console.log(curFiles);
//  curFiles = curFiles.filter(function(file) {
//      return file.name != name;
//  });
    curFiles.splice(index,1)
    console.log(curFiles);

    $(this).remove();
})
$(".subBtn").click(function(){
    // 构建FormData对象
    var fd = new FormData($('#form')[0]);
    for (var i = 0, j = curFiles.length; i < j; ++i) {
        fd.append('attach[]', curFiles[i]);
    }

    for(var pair of fd.entries()) {
       console.log(pair[0]+ ', '+ pair[1]); 
    }

    $.ajax({
        url: 'formData_test.php',
        type: 'post',
        data: fd,
        processData: false,
        contentType: false,
        success: function(rs) {
            console.log(rs);
        },
        error: function(err) {
        }
    });
})
</script>

</html>

      formData_test.php源码：

      <?php
$files = $_FILES['attach'];
var_dump($files);
?>

      回应

      上传前图片预览

      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="file">
<script>
$('input[type=file]').change(function(){
    var file=this.files[0];
    var reader=new FileReader();
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url=reader.result;
        setImageURL(url);
    };
    reader.readAsDataURL(file);
});

var image=new Image();
function setImageURL(url){
    image.src=url;
}
$(image).appendTo($('body'));
</script>


      回应

      vue学习路线

      https://cn.vuejs.org/

      新手：Vue 2.0 的建议学习顺序 https://zhuanlan.zhihu.com/p/23134551

      Vue技术内幕 http://hcysun.me/vue-design/

      Vue.js技术揭秘 https://ustbhuangyi.github.io/vue-analysis/

      Vue 3.0 动态核心概述 https://msd.misuland.com/pd/3255817963235705746

      回应

      电子相册

      电子书、电子杂志参考
官网 https://www.fliphtml5.com/

云展网企业宣传册制作：https://www.yunzhan365.com/
https://book.yunzhan365.com/pteyi/dckd/mobile/index.html
https://book.yunzhan365.com/rvdk/vggc/mobile/index.html

      photoswipe兼容手机版，支持拖动、缩放

      https://photoswipe.com/

      https://github.com/dimsemenov/photoswipe

      fancybox 不支持拖动、缩放


      回应

      使用jquery.qrcode.js生成二维码-支持中英文混合输入

      官网：https://larsjung.de/jquery-qrcode/
      github：https://github.com/lrsjng/jquery-qrcode
      演示：https://larsjung.de/jquery-qrcode/latest/demo/

      <div id="qrcodeTable"></div>
<img id="logoimg" src="logo.png">
<script>
$('#qrcodeTable').qrcode({
    // render method: 'canvas', 'image' or 'div'
    render: 'image',

    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 200, //二维码尺寸

    // code color or image element
    fill: '#000', //二维码颜色

    // background color or image element, null for transparent background
    background: '#fff', //背景色

    // content
    text: '汉a字',

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 2, //可理解为css的padding，大小为quiet*6像素

    // modes
    // 0: normal 无文字、无logo
    // 1: label strip
    // 2: label box 显示文字
    // 3: image strip
    // 4: image box 显示logo
    mode: 4,

    mSize: 0.1, //logo尺寸
    mPosX: 0.5, //logo位置
    mPosY: 0.5,

    label: 'hello', //使用文字代替logo
    fontname: 'sans',
    fontcolor: '#000',

    image: null, //$('#logoimg')[0]
});
</script>



      <script>
$('#qrcodeTable').qrcode({
    render: 'image', //canvas|image|div
    size: 200, //二维码尺寸
    text: '汉a字',
    quiet: 2, //可理解为css的padding，大小为quiet*6像素
});
</script>

      回应(1)

      12345678
      王新阳
      目录浏览
      CSS  ASP  PS  PHPExcel  阿里云  电影  视频  PHOTO  Apple  奇  WINDOWS  书签  SQL  nginx  bootstrap  CI  JS  video  HTML    IT  PHP  正则  HTML5  .htaccess  未分类  IIS  JQUERY  ueditor  layui  jQueryMobile  微信  web.config  微博  SEO  linux
      2024-11-23 星期六 农历十月二十三