Fork me on GitHub

js/jquery获取其他窗口的元素

js/jquery获取其他窗口的元素

1、获取 iframe 中的元素

1
2
3
4
5
//获取iframe页面中的document
let doc = window.frames['Iframe name 属性'].document;
let doc = document.getElementById('Iframe 的id').contentDocument;
//然后就可通过doc对象获取其中的元素了
【注意，需要在 onload事件中使用】

2、获取父级窗口元素

more >>

展开全文 >>

文件下载方式

文件下载方式

  1. get方式下载

    window.location.href = URL

    window.open(URL)

  2. post方式

  • form表单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var formObj = document.createElement('form');
              formObj.action = downloadURL;//设置下载路径
              formObj.method = method;//设置请求方式
    		 //formObj.enctype = 'multipart/form-data' 设置Content-Type
              formObj.style.display = 'none';//样式隐藏
              var addFormItem = (formObj,formItemName,formItemValue) => {
                let formItem = document.createElement('input');
                formItem.name = formItemName; // 传参的字段名
                formItem.value = formItemValue; // 传参的值
                formObj.appendChild(formItem)
              }
              addFormItem(formObj,'token',localStorage.getItem('accessToken'))//设置token参数
    		 //设置其他参数
              for(let data_key in data){
                addFormItem(formObj,data_key,data[data_key])
              }
        
              document.body.appendChild(formObj);//加入document
              formObj.submit();//触发submit事件
              document.body.removeChild(formObj);//移除dom
more >>

展开全文 >>

页面元素的全屏

页面元素的全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//1、全屏

function fullScreen(ele){
     const target = document.getElementById(ele);
     if(target.RequestFullScreen){
         target.RequestFullScreen();
      }
      //兼容火狐
      if(target.mozRequestFullScreen){
        target.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(target.webkitRequestFullScreen){
        target.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if(target.msRequestFullscreen){
        target.msRequestFullscreen();
      }
}

//2、退出全屏
function exitFullScreen(){
     const target = document;
     if(target.exitFullScreen){
        target.exitFullscreen()
      }
      //兼容火狐
      if(target.mozCancelFullScreen){
        target.mozCancelFullScreen()
      }
      //兼容谷歌等
      if(target.webkitExitFullscreen){
        target.webkitExitFullscreen()
      }
      //兼容IE
      if(target.msExitFullscreen){
        target.msExitFullscreen()
      }
}
more >>

展开全文 >>

js编码解码

  1. 编码 encodeURI和encodeURIComponent

    它们都是编码URL，唯一区别就是编码的字符范围了：

    encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&*()=:/,;?+’

    encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()’

    所以encodeURIComponent比encodeURI编码的范围更大。

    当你要编码整个URL，使用这个URL，那么用encodeURI。

    当你要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

  2. 解码 decodeURI()和decodeURIComponent()函数

    • decodeURIComponent()定义和用法：decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    • decodeURI()定义和用法：decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码。

3、btoa(),atob()

btoa() 方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。。atob()方法进行解码

4、unescape(),escape()

对字符串进行编解码。

展开全文 >>

对象池 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//对象池工厂
var objectPoolFactory = function(createObjFn) {
	var objectPool = [];

	return {
		create: function() {
			var obj = objectPool.length === 0 ?
				createObjFn.apply(this, arguments) : objectPool.shift();
			return obj;
		},
		recover: function(obj) {
			objectPool.push(obj);
		}
	}
};

// test
var iframeFactory = objectPoolFactory(function() {
	var iframe = document.createElement('iframe');
	document.body.appendChild(iframe);

	iframe.onload = function() {
		iframe.onload = null;   // 防止iframe重复加载
		iframeFactory.recover(iframe); // iframe加载完了回收节点
	}
	return iframe;
});

var iframe1 = iframeFactory.create();
iframe1.src = 'https://www.baidu.com';

var iframe2 = iframeFactory.create();
iframe2.src = 'http://www.qq.com/';

setTimeout(function() {
	var iframe3 = iframeFactory.create();
	iframe3.src = 'http://www.163.com';
}, 750);

展开全文 >>

Tampermonkey脚本

1、基本格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// ==UserScript==
// @name         脚本的名称
// @namespace    可以写个人的网站什么的
// @version      版本号
// @description  脚本的描述
// @author       作者
// @match        匹配站点，在那个网页中启用该脚本，可使用正则进行匹配
// @match        http://119.36.55.224:6850/zentao/my/
// @match        http://www.iqiyi.com/v_*
// @grant        需要什么权限（GM_addStyle添加css样式权限）
// @grant        GM_addStyle
// @require		 引用外部js
// @require		 http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// ==/UserScript==
$(function() {
  //在这里编写我们的脚本
})();

2、基本语法

more >>

展开全文 >>

多文件上传

upload函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 绑定上传按钮事件
$('#upload_btn').off('click').on('click',function(){
	$('.file').trigger('click')
})
//文件选择监听
$('.file').on('change',function(e){
    let files = e.target.files;
    console.log('文件',e.target,files);
    if(!files.length) return;
    let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
       formData.append('file',files[i],files[i].name)
    }
    console.log(formData.getAll('upFile'));
    $.ajax({
        url:api.uploadMoreFiles,
        type:"post",
        data:formData,
        // 设置 processData 选项为 false，防止自动转换数据格式
        processData: false,
        // contentType 设置为 false 避免 JQuery 对其操作
        contentType: false,
        timeout: -1,
        cache: false, //上传文件无需缓存
        success:function(data){
        	console.log('上传',data)
        },
        error:function(){
            showTips('失败')
        },
        complete:function(){
            $(".file").val(null)
        }
    })
    console.log('over');
})


同时限制上传.xls、.xlsx文件

<input 
    class="note-image-input form-control" 
    type="file" 
    name="files" 
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel " 
    multiple="multiple"
>

后缀

more >>

展开全文 >>

在线预览

实现在线预览Word,Excel,PowerPoint格式的文档

使用微软的预览接口来实现该功能

输入文档地址（可访问资源），点击创建URL按钮就可以生成一个新的链接：https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx

也就是说在使用的过程中可以通过‘https://view.officeapps.live.com/op/view.aspx?src=’ + url的方式打开

1
2
3
4
5
//a标签跳转新页面方式打开
<a target='_black'  href='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx'>预览文件</a>

//当前页面iframe嵌入方式打开
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx' />
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。