分类目录归档:前端

pageYOffset 属性是 scrollY 属性的别名

pageYOffset 属性是 scrollY 属性的别名:

window.pageYOffset == window.scrollY; // 总是返回 true

为了跨浏览器兼容,请使用 window.pageYOffset 代替 window.scrollY。另外,旧版本IE(<9)两个属性都不支持,必须使用其他的非标准属性。完整的兼容性代码如下:

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

JavaScript function* 函数

function* 这种声明方式(function关键字后跟一个星号)会定义一个生成器函数 (generator function),它返回一个  Generator  对象。

function* generator(i) {
  yield i;
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value);
// expected output: 10

console.log(gen.next().value);
// expected output: 20
console.log(gen.next().value);
// expected output: undefined
console.log(gen.next().value);
// expected output: undefined

laravel实现跨域的中间件

# 创建中间件
php artisan make:middleware EnableCrossRequestMiddleware
<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class EnableCrossRequestMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param Request $request
     * @param Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $origin = $request->header('Origin');
        if ($origin) {
            $exps = [
                '/.*\.xxx\.com$/', # 匹配下自己的域名
                '/.*localhost.*/',
                '/.*127.0.0.1.*/',
                '/.*10.*/',
            ];
            foreach ($exps as $exp) {
                $matchCount = preg_match($exp, $origin, $matches);
                if ($matchCount && isset($matches[0])) {
                    if ($request->isMethod('OPTIONS')) {
                        $response = response('');
                        $response->withHeaders([
                            'Access-Control-Allow-Credentials' => 'true',
                            'Access-Control-Allow-Origin' => $origin,
                            'Access-Control-Allow-Methods' => 'GET, POST',
                            'Access-Control-Allow-Headers' => 'Content-Type, Token',
                            'Access-Control-Max-Age' => 3600 * 24,
                        ]);
                        return $response;
                    }
                    $response = $next($request);
                    $response->withHeaders([
                        'Access-Control-Allow-Credentials' => 'true',
                        'Access-Control-Allow-Origin' => $origin,
                    ]);
                    return $response;
                }
            }
        }
        return $next($request);
    }
}

另外需要关闭csrf保护否则会413

js 批量打包下载图片一例

<script src="./js/jszip.min.js"></script>
<script src="./js/FileSaver.min.js"></script>
<script src="./jquery/2.1.3/js/jquery.min.js"></script>
<script>
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    var img = zip.folder("images");
    img.file("1.png", getBase64("https://www.baidu.com/img/bd_logo1.png"), {base64: true});
    zip.generateAsync({type: "blob"})
        .then(function (content) {
            // see FileSaver.js
            saveAs(content, "example.zip");
        });


    //传入图片路径,返回base64
    function getBase64(img) {
        function getBase64Image(img, width, height) {//width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
            var canvas = document.createElement("canvas");
            canvas.width = width ? width : img.width;
            canvas.height = height ? height : img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            var arr = dataURL.split(",");
            return arr[1];
        }

        var image = new Image();
        image.crossOrigin = 'Anonymous';
        image.src = img;
        var deferred = $.Deferred();
        if (img) {
            image.onload = function () {
                deferred.resolve(getBase64Image(image));//将base64传给done上传处理
            }
            return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
        }
    }
</script>

X-Frame-Options 响应头

X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame><iframe>或者 <object> 中展现的标记。网站可以使用此功能,来确保自己网站的内容没有被嵌到别人的网站中去,也从而避免了点击劫持 (clickjacking) 的攻击。

X-Frame-Options 有三个值:

DENY
表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许。
SAMEORIGIN
表示该页面可以在相同域名页面的 frame 中展示。
ALLOW-FROM uri
表示该页面可以在指定来源的 frame 中展示。

换一句话说,如果设置为 DENY,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为 SAMEORIGIN,那么页面就可以在同域名页面的 frame 中嵌套。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

$.getScript原生实现

var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘/xxx.js’; //填自己的js路径
document.body.appendChild(script);// 缺点:不能跨域load

# 方法2

(function(){
var i = document.createElement(‘iframe’);
i.style.display = ‘none’;
// i.onload = function() {i.parentNode.removeChild(i);};
// i.name=”;
i.src = ‘http://xxx/xx’;
document.body.appendChild(i);
// i.contentWindow.document.body.innerHTML = ”;
})();