Skip to content

Files

Latest commit

188ec56 · Oct 17, 2018

History

History
258 lines (233 loc) · 8.83 KB

静态页面之间传值.md

File metadata and controls

258 lines (233 loc) · 8.83 KB
title date tags categories
静态页面之间传值
2018-08-22 15:40:46 -0700
URL
HTTP
HTTP

今天在工作中需要实现视频的播放功能,我需要从视频的聚合页通过点击来跳转到视频播放页面来进行播放。因为视频是托管在POLYV平台上的,视频以.swf的格式保存的话就不能直接使用video标签,而是需要使用特定的方法来实现视频的播放功能,我最后选择的是视频平台上的多终端样式,具体代码如下:

<script src='//player.polyv.netscriptpolyvplayer.min.js'></script>
<div id='plv_228d7015db12fcd9a62b5abc1f76540f_2'></div>
<script>
	var player = polyvObject('#plv_228d7015db12fcd9a62b5abc1f76540f_2').videoPlayer({	
		'width':'600',
 		'height':'338',
		'vid' : '228d7015db12fcd9a62b5abc1f76540f_2'  
	 });
</script>

我的视频聚合页中的一个例子是:

<a href="" class="vedioCard">
	<img src="xxx.jpg" class="ved">
	<div class="deti">江苏的启东</div>
</a>

紧接着我在a标签里面加上传递参数的url:

<a href="./video.html?vid=228d7015db9fd7dbd831b586d395e7fb_2" class="vedioCard">
	<img src="xxx.jpg" class="ved">
	<div class="deti">江苏的启东</div>
</a>

vid就是我在播放页面想要获取的参数,因为视频的播放需要这个参数。 接下来我需要在播放页面使用$.query.get(param)方法来获取我想要的东西,这看上去就是和jquery有关,没错!这是jquery的一个插件,插件的代码我也拿过来使用:

new function(settings) {
  var $separator = settings.separator || '&';
  var $spaces = settings.spaces === false ? false : true;
  var $suffix = settings.suffix === false ? '' : '[]';
  var $prefix = settings.prefix === false ? false : true;
  var $hash = $prefix ? settings.hash === true ? "#" : "?" : "";
  var $numbers = settings.numbers === false ? false : true;

  jQuery.query = new function() {
    var is = function(o, t) {
    return o != undefined && o !== null && (!!t ? o.constructor == t : true);
  };
  var parse = function(path) {
    var m, rx = /\[([^[]*)\]/g, match = /^([^[]+)(\[.*\])?$/.exec(path), base = match[1], tokens = [];
    while (m = rx.exec(match[2])) tokens.push(m[1]);
    return [base, tokens];
  };
  var set = function(target, tokens, value) {
    var o, token = tokens.shift();
    if (typeof target != 'object') target = null;
    if (token === "") {
      if (!target) target = [];
      if (is(target, Array)) {
        target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
    } else if (is(target, Object)) {
      var i = 0;
      while (target[i++] != null);
      target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
    } else {
      target = [];
      target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
    }
  } else if (token && token.match(/^\s*[0-9]+\s*$/)) {
    var index = parseInt(token, 10);
    if (!target) target = [];
    target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
  } else if (token) {
    var index = token.replace(/^\s*|\s*$/g, "");
    if (!target) target = {};
    if (is(target, Array)) {
      var temp = {};
      for (var i = 0; i < target.length; ++i) {
        temp[i] = target[i];
      }
      target = temp;
    }
    target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
    } else {
      return value;
    }
    return target;
  };

  var queryObject = function(a) {
  var self = this;
  self.keys = {};
  
  if (a.queryObject) {
    jQuery.each(a.get(), function(key, val) {
      self.SET(key, val);
    });
  } else {
    jQuery.each(arguments, function() {
      var q = "" + this;
      q = q.replace(/^[?#]/,'');
      q = q.replace(/[;&]$/,'');
      if ($spaces) q = q.replace(/[+]/g,' ');
      
      jQuery.each(q.split(/[&;]/), function(){
        var key = decodeURIComponent(this.split('=')[0] || "");
        var val = decodeURIComponent(this.split('=')[1] || "");
        
        if (!key) return;
        
        if ($numbers) {
          if (/^[+-]?[0-9]+\.[0-9]*$/.test(val))
            val = parseFloat(val);
          else if (/^[+-]?[0-9]+$/.test(val))
            val = parseInt(val, 10);
        }
        
        val = (!val && val !== 0) ? true : val;
        
        if (val !== false && val !== true && typeof val != 'number')
          val = val;
        
        self.SET(key, val);
      });
    });
  }
  return self;
};

queryObject.prototype = {
  queryObject: true,
  has: function(key, type) {
    var value = this.get(key);
    return is(value, type);
  },
  GET: function(key) {
    if (!is(key)) return this.keys;
    var parsed = parse(key), base = parsed[0], tokens = parsed[1];
    var target = this.keys[base];
    while (target != null && tokens.length != 0) {
      target = target[tokens.shift()];
    }
    return typeof target == 'number' ? target : target || "";
  },
  get: function(key) {
    var target = this.GET(key);
    if (is(target, Object))
      return jQuery.extend(true, {}, target);
    else if (is(target, Array))
      return target.slice(0);
    return target;
  },
  SET: function(key, val) {
    var value = !is(val) ? null : val;
    var parsed = parse(key), base = parsed[0], tokens = parsed[1];
    var target = this.keys[base];
    this.keys[base] = set(target, tokens.slice(0), value);
    return this;
  },
  set: function(key, val) {
    return this.copy().SET(key, val);
  },
  REMOVE: function(key) {
    return this.SET(key, null).COMPACT();
  },
  remove: function(key) {
    return this.copy().REMOVE(key);
  },
  EMPTY: function() {
    var self = this;
    jQuery.each(self.keys, function(key, value) {
      delete self.keys[key];
    });
    return self;
  },
  load: function(url) {
    var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
    var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, "$1");
    return new queryObject(url.length == search.length ? '' : search, url.length == hash.length ? '' : hash);
  },
  empty: function() {
    return this.copy().EMPTY();
  },
  copy: function() {
    return new queryObject(this);
  },
  COMPACT: function() {
    function build(orig) {
      var obj = typeof orig == "object" ? is(orig, Array) ? [] : {} : orig;
      if (typeof orig == 'object') {
        function add(o, key, value) {
          if (is(o, Array))
            o.push(value);
          else
            o[key] = value;
        }
        jQuery.each(orig, function(key, value) {
          if (!is(value)) return true;
          add(obj, key, build(value));
        });
      }
      return obj;
    }
    this.keys = build(this.keys);
    return this;
  },
  compact: function() {
    return this.copy().COMPACT();
  },
  toString: function() {
    var i = 0, queryString = [], chunks = [], self = this;
    var encode = function(str) {
      str = str + "";
      if ($spaces) str = str.replace(/ /g, "+");
      return encodeURIComponent(str);
    };
    var addFields = function(arr, key, value) {
      if (!is(value) || value === false) return;
      var o = [encode(key)];
      if (value !== true) {
        o.push("=");
        o.push(encode(value));
      }
      arr.push(o.join(""));
    };
    var build = function(obj, base) {
      var newKey = function(key) {
        return !base || base == "" ? [key].join("") : [base, "[", key, "]"].join("");
      };
      jQuery.each(obj, function(key, value) {
        if (typeof value == 'object') 
          build(value, newKey(key));
        else
          addFields(chunks, newKey(key), value);
        });
      };
    
      build(this.keys);
    
      if (chunks.length > 0) queryString.push($hash);
      queryString.push(chunks.join($separator));
    
      return queryString.join("");
      }
    };

  return new queryObject(location.search, location.hash);
  };
}(jQuery.query || {});

在有了这个插件之后我们就可以很轻松地拿到url中的参数了:

let vid = $.query.get('vid');

拿到参数之后只要像对待普通DOM元素一样对上面视频播放的那个div进行属性的修改,就可以播放不同的视频了。