Web 常用小功能

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 2.3k 阅读时长 ≈ 2 分钟

iframe 标签与父页面的传值

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
/**
* 父页面
**/
// 给子类传值
function toChildDefaultMd(){
    var md = "../md/test.md";
    return md;
}

// 调用子类方法
function toChildSelectMd(str){
  if(str == null){
      str = "../md/test.md";
  }
  var ifra = document.getElementById("iframe");
  // 获取到 iframe 标签，然后调用子类方法。
  ifra.contentWindow.showMarkdown(str);
}

/**
* 子页面
**/
// 获取父页面的传值
var md = window.parent.toChildDefaultMd();
showMarkdown(md)

// 提供父页面调用的方法
function showMarkdown(str) {}


/**
* 示例：iframe 页面从父页面获取页面高度，并且赋值给自身。
**/
// 父页面，给子类传值。
function toChildValue() {
    var txt = wH;
    return txt;
}


// 子页面，获取父页面传来的数据。
var getParentVule = window.parent.toChildValue();
// alert(getParentVule)
var main = document.getElementById('main');
main.style.height = getParentVule + 'px';

页面跳转，获取参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 这只是最简单的，还可以传递多个参数与变量（类似字符串的使用方式）。
<a href="index.html?arr=哼">测试</a>

// 获取url中"?"符后的字串
var url = location.search; 
    var theRequest = new Object();
    var arr;
    var sp = "";
    if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
      }
      var Request = new Object();
      Request = theRequest;

      arr = Request['arr'];
      // alert(arr);
      // 当存在多个参数时
      // sp = arr.split(",");
      // alert(sp);
}

元素居中

1
2
3
4
5
6
7
8
9
10
11
// 水平居中
left: 50%;
margin-left: -15px; // 宽度的一半，并且为负数
position: absolute;

 // 元素居中
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);

js 动态创建布局

1
2
3
4
5
6
7
8
9
10
11
12
  var index_content = document.getElementById("index_content");

var arrValue = "";
var lim = "";
var arrLength="";
for (var i = 0; i < arrLength; i++) {
      // 这里一定要注意符号的问题。
    var li = "<div><a href='content.html?arr=" +i +","+ arrValue + "'target='_self'>" + arrValue + "</a></div>";
  }
  lim += li;
}
index_content.innerHTML = lim;

传参乱码

1
2
3
4
5
6
7
8
9
10
11
12
// encodeURL编码 decodeURL解码

// 第一个页面
<div onclick="toHref('index.html?arr=1')">点击</div>
function toHref(url){
  var searchUrl=encodeURI(url);
  console.log(searchUrl);
  window.location.href = searchUrl;
}

// 第二个页面
var url = decodeURI(window.location.href.split('?')[1]);