React中使用iframe嵌套百度拾取坐标系统

效果图

参考百度效果:百度拾取坐标系统
GitHub上大佬封装的百度拾取的源码
修改了部分源码,删除搜索结果列表功能,坐标反查功能。实现了城市切换,地图搜索功能。关键是获取实时坐标点

使用百度拾取系统

实际开发中碰到的问题如下:

1、实现iframe嵌套

          <iframe
              src="/bdMap.html"
              title="this is map"
              style={{ width: "750px", height: "500px", border: "none" }}
              ref="map"
            />
项目路径,保存下public路径下
出现报错

嵌套iframe后页面提示错误了,意思是需要合适的loader处理文件类型,在create-react-app中没有解析html类型的loader,所以需要我们自己手动添加,解析html文件的loader为html-loader,加在webpack.config.dev.js中,同时也要安装依赖npm i html-loader -S如下

{
            test: /\.html$/,
            use: [
              {
                loader: require.resolve('html-loader')
              }
            ]
          },

2、查询坐标点及地址回传给父组件

         // iframe中,将地图对象赋值给window
         window.mapObj = mapObj;

        // 父级 react组件中,通过iframe.contentWindow获取iframe中window对象
        let mapObj = this.refs.map.contentWindow.mapObj;

3、父组件传递地址到iframe中打点

        // 通过iframe中contentWindow.document获取iframe中dom元素,进行点击查询操作
        let mapInput = this.refs.map.contentWindow.document.getElementById(
            "localvalue"
          );
          let mapBtn = this.refs.map.contentWindow.document.getElementById(
            "localsearch"
          );
          mapInput.value = address.city.label + name;
          mapBtn.click()

部分源码

// phblic.js
if (typeof console == "undefined") {
  console = {};
  console.log = function() {};
}

window.onerror = function() {};

(function() {
  var i = (window.DomReady = {});
  var h = navigator.userAgent.toLowerCase();
  var c = {
    version: (h.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
    safari: /webkit/.test(h),
    opera: /opera/.test(h),
    msie: /msie/.test(h) && !/opera/.test(h),
    mozilla: /mozilla/.test(h) && !/(compatible|webkit)/.test(h)
  };
  var d = false;
  var e = false;
  var g = [];
  function a() {
    if (!e) {
      e = true;
      if (g) {
        for (var j = 0; j < g.length; j++) {
          g[j].call(window, []);
        }
        g = [];
      }
    }
  }
  function f(j) {
    var k = window.onload;
    if (typeof window.onload != "function") {
      window.onload = j;
    } else {
      window.onload = function() {
        if (k) {
          k();
        }
        j();
      };
    }
  }
  function b() {
    if (d) {
      return;
    }
    d = true;
    if (document.addEventListener && !c.opera) {
      document.addEventListener("DOMContentLoaded", a, false);
    }
    if (c.msie && window == top) {
      (function() {
        if (e) {
          return;
        }
        try {
          document.documentElement.doScroll("left");
        } catch (k) {
          setTimeout(arguments.callee, 0);
          return;
        }
        a();
      })();
    }
    if (c.opera) {
      document.addEventListener(
        "DOMContentLoaded",
        function() {
          if (e) {
            return;
          }
          for (var k = 0; k < document.styleSheets.length; k++) {
            if (document.styleSheets[k].disabled) {
              setTimeout(arguments.callee, 0);
              return;
            }
          }
          a();
        },
        false
      );
    }
    if (c.safari) {
      var j;
      (function() {
        if (e) {
          return;
        }
        if (
          document.readyState != "loaded" &&
          document.readyState != "complete"
        ) {
          setTimeout(arguments.callee, 0);
          return;
        }
        if (j === undefined) {
          var l = document.getElementsByTagName("link");
          for (var m = 0; m < l.length; m++) {
            if (l[m].getAttribute("rel") == "stylesheet") {
              j++;
            }
          }
          var k = document.getElementsByTagName("style");
          j += k.length;
        }
        if (document.styleSheets.length != j) {
          setTimeout(arguments.callee, 0);
          return;
        }
        a();
      })();
    }
    f(a);
  }
  i.ready = function(k, j) {
    b();
    if (e) {
      k.call(window, []);
    } else {
      g.push(function() {
        return k.call(window, []);
      });
    }
  };
  b();
})();

var Fe = Fe || {
  version: "20080809",
  emptyFn: function() {}
};

// 保存地图信息
var mapObj = {};

Fe._log = [];
var counter = 0;
var instances = {};

Fe.BaseClass = function(a) {
  instances[(this.hashCode = a || Fe.BaseClass.guid())] = this;
};

Fe.BaseClass.guid = function() {
  return "mz_" + (counter++).toString(36);
};

Fe.BaseClass.create = function() {
  var a = new Fe.BaseClass();
  a.decontrol();
  return a;
};

window.Instance = Fe.instance = Fe.I = function(a) {
  return instances[a];
};

Fe.BaseClass.prototype.dispose = function() {
  if (this.hashCode) {
    delete instances[this.hashCode];
  }
  for (var a in this) {
    if (typeof this[a] != "function") {
      delete this[a];
    }
  }
};

Fe.BaseClass.prototype.getHashCode = function() {
  if (!this.hashCode) {
    instances[(this.hashCode = Fe.BaseClass.guid())] = this;
  }
  return this.hashCode;
};

Fe.BaseClass.prototype.decontrol = function() {
  delete instances[this.hashCode];
};

Fe.BaseClass.prototype.toString = function() {
  return "[object " + (this._className || "Object") + "]";
};

Fe.BaseClass.prototype._wlog = function(c, d) {
  var b = Fe._log;
  if (b.length > 100) {
    b.reverse().length = 50;
    b.reverse();
  }
  b[b.length] =
    "[" +
    c +
    "][" +
    (this._className || "Object") +
    " " +
    this.hashCode +
    "] " +
    d;
};

Fe.extend = function(d, b) {
  if (d && b && typeof b == "object") {
    for (var c in b) {
      d[c] = b[c];
    }
    var a = [
      "constructor",
      "hasOwnProperty",
      "isPrototypeOf",
      "propertyIsEnumerable",
      "toLocaleString",
      "toString",
      "valueOf"
    ];
    for (var e = 0, f; e < a.length; e++) {
      f = a[e];
      if (Object.prototype.hasOwnProperty.call(b, f)) {
        d[f] = b[f];
      }
    }
  }
  return d;
};

Fe.on = function(a, c, b) {
  if (!(a = Fe.G(a))) {
    return a;
  }
  c = c.replace(/^on/, "").toLowerCase();
  if (a.attachEvent) {
    a[c + b] = function() {
      b.call(a, window.event);
    };
    a.attachEvent("on" + c, a[c + b]);
  } else {
    a.addEventListener(c, b, false);
  }
  return a;
};

Fe.un = function(a, c, b) {
  if (!(a = Fe.G(a))) {
    return a;
  }
  c = c.replace(/^on/, "").toLowerCase();
  if (a.attachEvent) {
    a.detachEvent("on" + c, a[c + b]);
    a[c + b] = null;
  } else {
    a.removeEventListener(c, b, false);
  }
  return a;
};

Fe.G = function() {
  for (var b = [], c = arguments.length - 1; c > -1; c--) {
    var d = arguments[c];
    b[c] = null;
    if (typeof d == "object" && d && d.dom) {
      b[c] = d.dom;
    } else {
      if (
        (typeof d == "object" && d && d.tagName) ||
        d == window ||
        d == document
      ) {
        b[c] = d;
      } else {
        if (typeof d == "string" && (d = document.getElementById(d))) {
          b[c] = d;
        }
      }
    }
  }
  return b.length < 2 ? b[0] : b;
};

Fe.copy = function(a) {};

function beforeEndHTML(b, a) {
  b.insertAdjacentHTML("beforeEnd", a);
  return b.lastChild;
}

function getClientSize() {
  if (window.innerHeight) {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  } else {
    if (document.documentElement && document.documentElement.clientHeight) {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      };
    } else {
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      };
    }
  }
}
function foucs_(a, b, c) {
  if (!c) {
    c = "";
  }
  a.style.color = "#000";
  a.value != b ? null : (a.value = c);
}

function blur_(a, b, c) {
  a.style.color = "#8c8c8c";
  a.value == c || a.value.length <= 0 ? (a.value = b) : null;
}

function loadBody() {
  initMapSize();
  initMap();
  addMapControls();
  setTimeout(function() {
    mapResize();
  }, 200);
}

function initMapSize() {
  var a = Fe.G("MapHolder");
  var b = getClientSize().height - 80;
  b = b < 0 ? 0 : b;
  a.style.height = b + "px";
}

function initMap() {
  window.map = new BMap.Map("MapHolder", { enableMapClick: false });
  window.projection = new BMap.MercatorProjection();
  var a = new BMap.Point(116.509421, 39.929274);
  mapObj.city = "北京";
  map.addEventListener("load", function(b) {
    getCurrentCityName();
  });
  map.addEventListener("moveend", function(b) {
    getCurrentCityName();
  });
  map.addEventListener("dragend", function(b) {
    getCurrentCityName();
  });
  map.addEventListener("zoomend", function(b) {
    getCurrentCityName();
  });
  map.addEventListener("click", function(c) {
    var b = c.point;
    if (c.overlay && c.overlay instanceof BMap.Marker) {
      b = c.overlay.point;
    }
    setInputPoint(b);
    searchByPoint(c.point.lng + "," + c.point.lat);
  });
  map.addEventListener("mousemove", function(c) {
    if (!temp.mouseLabel) {
      createMouseMoveLabel(c.point);
    }
    if (!temp.mouseLabel.isVisible()) {
      temp.mouseLabel.show();
    }
    var k = temp.mouseLabel;
    var h = map.getContainer();
    var g = h.clientWidth;
    var f = h.clientHeight;
    var j = 132;
    var i = 19;
    var n = map.pointToPixel(c.point).x + 13;
    var l = map.pointToPixel(c.point).y + 20;
    var m = map.pixelToPoint(new BMap.Pixel(g - j - 13, f - i - 20));
    var b = map.pixelToPoint(new BMap.Pixel(n - j - 33, f - i - 20));
    var d = c.point;
    if (g - n < j) {
      d = new BMap.Point(m.lng, d.lat);
    }
    if (f - l < i) {
      d = new BMap.Point(d.lng, m.lat);
    }
    if (g - n - 16 < j && f - l < i) {
      d = b;
    }
    k.setPosition(d);
    k.setContent(c.point.lng + "," + c.point.lat);
  });
  Fe.on(document.body, "mousemove", function(c) {
    var c = window.event || c;
    var b = c.srcElement || c.target;
    if (
      b.className != "BMap_mask" &&
      temp.mouseLabel &&
      temp.mouseLabel.isVisible()
    ) {
      temp.mouseLabel.hide();
    }
  });
  Fe.on(document.body, "mouseout", function(c) {
    var c = window.event || c;
    var b = c.srcElement || c.target;
    if (
      b.className == "BMap_mask" &&
      temp.mouseLabel &&
      temp.mouseLabel.isVisible()
    ) {
      temp.mouseLabel.hide();
    }
  });
  mapInfo.centerPoint = a;
  map.centerAndZoom(a, 10);
  map.enableScrollWheelZoom();
  map.setDefaultCursor("default");
  map.setDraggingCursor("default");
  // searchByPoint("116.509421,39.929274");
}

function setInputPoint(a) {
  var value = a.lng + "," + a.lat;
  Fe.G("pointInput").innerHTML = value;
}

function createMouseMoveLabel(c) {
  var a = map.pixelToPoint(new BMap.Pixel(0, 0));
  var b = c.lng + "," + c.lat;
  var d = new BMap.Label(b, {
    point: a,
    offset: new BMap.Size(13, 20),
    enableMassClear: false
  });
  d.setStyle({
    background: "#fff",
    border: "#999 solid 1px",
    zIndex: 10000000
  });
  map.addOverlay(d);
  temp.mouseLabel = d;
}

function addMapControls() {
  window.stdMapCtrl = new BMap.NavigationControl();
  map.addControl(window.stdMapCtrl);
  window.scaleCtrl = new BMap.ScaleControl();
  map.addControl(window.scaleCtrl);
  window.overviewCtrl = new BMap.OverviewMapControl();
  map.addControl(window.overviewCtrl);
  var a = new BMap.CopyrightControl();
  map.addControl(a);
}

function mapResize() {
  var a = Fe.G("MapHolder");
  if (window._resizeTimer) {
    return;
  }
  window._resizeTimer = setTimeout(function() {
    var c = getClientSize().height - 80;
    var d = c - 20;
    c = c < 0 ? 0 : c;
    d = d < 0 ? 0 : d;
    a.style.height = c + "px";
    window._resizeTimer = null;
  }, 100);
}

var mapInfo = {
  cityName: "",
  cityCode: "",
  centerPoint: null
};

var temp = {
  pt: [],
  mk: [],
  iw: [],
  iwOpenIndex: null,
  mouseLabel: null,
  poiSearchMark: null,
  geoCoder: null
};

var eventTemp = {};

function clearLastResult() {
  Fe.G("currentAddr").innerHTML = "";
  //   Fe.G("pointInput").innerHTML = "";
  temp.pt = [];
  temp.mk = [];
  temp.iw = [];
  temp.iwOpenInde = null;
  map.clearOverlays();
  if (temp.poiSearchMark) {
    temp.poiSearchMark.hide();
  }
}

function localsearch() {
  var a = [];
  var c = Fe.G("localvalue").value;
  mapObj.name = c
  var d = {
    onSearchComplete: function(w) {
      clearLastResult();
      if (b.getStatus() == BMAP_STATUS_SUCCESS) {
        var c = w.Br[0];
        var point = c.point;
        if (c.overlay && c.overlay instanceof BMap.Marker) {
          c = c.overlay.point;
        }
        setInputPoint(point);
        searchByPoint(c.point.lng + "," + c.point.lat);
        var a = new BMap.Point(point.lng, point.lat);
        mapInfo.centerPoint = a;
        map.centerAndZoom(a, 15);
      }
    }
  };
  var b = new BMap.LocalSearch(map, d);
  window.l_local = b;
  beginsearch(b);
}

function setCurrentMapInfo(c, d) {
  var a = mapInfo;
  var b = map.getZoom();
  a.cityName = c;
  a.cityCode = d;
  a.centerPoint = map.getCenter();
  Fe.G("curCity").innerHTML = c;
  Fe.G("ZoomNum").innerHTML = b;
}

function getCurrentCityName() {
  var a = map.getZoom();
  var c;
  var h = 10000;
  if (a <= 7) {
    c = a;
    setCurrentMapInfo("全国");
    return;
  }
  var i = function() {
    var m = map.getBounds();
    var j = projection.lngLatToPoint(m.getSouthWest());
    var l = projection.lngLatToPoint(m.getNorthEast());
    var k = function(n) {
      return parseInt(n / 1000) * 1000;
    };
    return k(j.x) + "," + k(j.y) + ";" + k(l.x) + "," + k(l.y);
  };
  var e = mapInfo.centerPoint;
  var d = map.getCenter();
  var f = Math.sqrt(
    (e.lng - d.lng) * (e.lng - d.lng) + (e.lat - d.lat) * (e.lat - d.lat)
  );
  if (f > h || a != c) {
    c = a;
    var b = "http://map.baidu.com/?newmap=1&qt=cen&b=" + i() + "&l=" + a;
    scriptRequest(b, g, "_MAP_CENTER_", "gbk");
  }
  function g() {
    if (typeof _mapCenter == "undefined") {
      return;
    }
    var j = _mapCenter;
    var k = j.content;
    if (!k) {
      return;
    }
    setCurrentMapInfo(_mapCenter.content.name, _mapCenter.content.uid);
  }
}

function bindEvent() {
  var d = temp.mk;
  var a = temp.iw;
  var b = function(g) {
    if (temp.iwOpenIndex == g) {
      return;
    }
    temp.iwOpenIndex = g;
    d[g].openInfoWindow(a[g]);
    setInputPoint(d[g].point);
  };
  var c = function(g) {
    if (temp.iwOpenIndex == g) {
      return;
    }
    var i = d[g];
    var h = i.getIcon();
    h.setImageOffset(new BMap.Size(0, -250 - g * 25));
    i.setIcon(h);
    i.setTop(true, 1000100);
    Fe.G("no_" + g) ? (Fe.G("no_" + g).className = "hover") : null;
  };
  var e = function(g) {
    var i = d[g];
    if (temp.iwOpenIndex == g) {
      i.setTop(true);
      return;
    }
    var h = i.getIcon();
    h.setImageOffset(new BMap.Size(0, -g * 25));
    i.setIcon(h);
    i.setTop(false);
    Fe.G("no_" + g) ? (Fe.G("no_" + g).className = "") : null;
  };
  for (var f = 0; f < d.length; f++) {
    (function() {
      var h = f;
      var i = d[h];
      var g = a[h];
      d[h].addEventListener("click", function() {
        b(h);
      });
      d[h].addEventListener("mouseover", function() {
        c(h);
      });
      d[h].addEventListener("mouseout", function() {
        e(h);
      });
      g.addEventListener("open", function() {
        temp.iwOpenIndex = h;
      });
      g.addEventListener("close", function() {
        temp.iwOpenIndex = null;
        e(h);
      });
      Fe.on(Fe.G("no_" + h), "click", function() {
        b(h);
      });
      Fe.on(Fe.G("no_" + h), "mouseover", function() {
        c(h);
      });
      Fe.on(Fe.G("no_" + h), "mouseout", function() {
        e(h);
      });
      Fe.on(Fe.G("mk_" + h), "click", function() {
        b(h);
      });
      Fe.on(Fe.G("mk_" + h), "mouseover", function() {
        c(h);
      });
      Fe.on(Fe.G("mk_" + h), "mouseout", function() {
        e(h);
      });
    })();
  }
}

function addMarker(a) {
  debugger;
  var b = temp.pt[a];
  var d = new BMap.Icon("Images/markers.png", new BMap.Size(23, 25), {
    offset: new BMap.Size(10, 25),
    imageOffset: new BMap.Size(0, 0 - a * 25),
    infoWindowAnchor: new BMap.Size(12, 0)
  });
  var c = new BMap.Marker(b, {
    icon: d
  });
  map.addOverlay(c);
  temp.mk.push(c);
  return c;
}

function createIw(a) {
  var e = a.tit;
  var h = a.add;
  var d = a.tel;
  var i = a.poi.lng + "," + a.poi.lat;
  var j = '<p class="iwContent">';
  var f = a.type;
  var c = "地址";
  if (f == 1) {
    c = "途径公交车";
  }
  if (f == 3) {
    c = "途径地铁";
  }
  j += "<em>" + c + ":</em>" + h + "<br/>";
  d ? (j += "<em>电话:</em>" + d + "<br/>") : null;
  j += "<em>坐标:</em>" + i + "";
  j += "</p>";
  var g = e;
  if (g.length > 15) {
    g = g.substring(0, 12) + "...";
  }
  var b = new BMap.InfoWindow(j, {
    title: '<span class="iwTitle" title="' + e + '">' + g + "</span>",
    width: 250
  });
  temp.iw.push(b);
  return b;
}

function showMoreCity() {
  Fe.G("cityList").style.height = "auto";
  Fe.G("moreCityPop").style.display = "none";
}

function goCity(c) {
  var b = c.tagName.toLowerCase() == "input" ? "value" : "innerHTML";
  var a = c[b];
  mapObj.city = a;
  getCityPoint(a);
}
function getCityPoint(b) {
  b = encodeURIComponent(b);
  var a =
    "http://map.baidu.com/?newmap=1&qt=cur&callback=setCurrentCity&ie=utf-8&wd=" +
    b +
    "&oue=1&res=jc";
  scriptRequest(a, "null");
}

function setCurrentCity(d) {
  if (!d.content || d.content.error == 0) {
    setTimeout(function() {
      Fe.G("selCityMessage").style.display = "block";
      Fe.G("selCityMessage").innerHTML = "请输入正确的中文城市名称";
    }, 0);
  } else {
    hidePop();
    var b = d.content.geo
      .split("|")[2]
      .split(";")[0]
      .split(",")[0];
    var a = d.content.geo
      .split("|")[2]
      .split(";")[0]
      .split(",")[1];
    var c = projection.pointToLngLat(new BMap.Pixel(b, a));
    if (d.content.cname == "全国") {
      map.centerAndZoom(new BMap.Point(c.lng, c.lat), 5);
    } else {
      map.centerAndZoom(new BMap.Point(c.lng, c.lat), d.content.level);
    }
    clearLastResult();
    Fe.G("resultNum").innerHTML = "";
    Fe.G("txtPanel").innerHTML =
      '<span style="color:#00c">已切换至' + d.content.cname + "</span>";
  }
}

function hidePop() {
  if (Fe.G("selCityInput")) {
    Fe.G("selCityInput").value = "请输入城市名";
    Fe.G("selCityMessage").style.display = "none";
    Fe.G("map_popup").style.display = "none";
  }
  if (eventTemp.cityPop.length > 0) {
    var a = eventTemp.cityPop;
    for (var b = 0; b < a.length; b++) {
      Fe.un(a[b].dom, a[b].type, a[b].fun);
    }
    eventTemp.cityPop = [];
  }
}

function showPop() {
  if (Fe.G("map_popup").style.display == "block") {
    return;
  }
  Fe.G("map_popup").style.display = "block";
  var a = function(c) {
    var b = c.srcElement || c.target;
    while (b) {
      if (b == Fe.G("map_popup") || b == Fe.G("curCityText")) {
        return;
      }
      if (b == Fe.G("selCity")) {
        Fe.G("selCityMessage").style.display = "none";
        return;
      }
      if (b == document.body) {
        hidePop();
        return;
      }
      b = b.parentNode;
    }
  };
  Fe.on(document.body, "mousedown", a);
  eventTemp.cityPop = [];
  eventTemp.cityPop.push({
    dom: document.body,
    type: "mousedown",
    fun: a
  });
}

var TimerSM;
function showMessage(b) {
  var a = Fe.G("searchTip");
  if (TimerSM) {
    clearTimeout(TimerSM);
  }
  a.innerHTML = b;
  TimerSM = setTimeout(function() {
    a.innerHTML = "";
  }, 1000);
}

function getAbsPoint(c) {
  var b = c.offsetLeft;
  var a = c.offsetTop;
  while ((c = c.offsetParent)) {
    b += c.offsetLeft;
    a += c.offsetTop;
  }
  return {
    x: b,
    y: a
  };
}

function filtQuery(a) {
  a = a || "";
  return a
    .replace(/[\uac00-\ud7a3]/g, "")
    .replace(/\u2022|\u2027|\u30FB/g, String.fromCharCode(183))
    .replace(/^\s*|\s*$/g, "");
}

function beginsearch(b, a) {
  var c = filtQuery(Fe.G("localvalue").value);
  if (!c || c == "请输入关键字进行搜索") {
    return;
  }
  if (!a) {
    b.setLocation(map);
  }
  b.search(c);
}

function searchByPoint(c) {
  var d = c.split(",");
  var b;
  var g = "";
  var e = temp.poiSearchMark;
  var a = temp.geoCoder;
  if (
    d[0] &&
    d[0].split(".")[0].length > 5 &&
    d[1] &&
    d[1].split(".")[0].length > 5
  ) {
    var f = projection.pointToLngLat(new BMap.Pixel(d[0], d[1]));
    d = [f.lng, f.lat];
  }
  if (d[0] && d[1]) {
    clearLastResult();
    b = new BMap.Point(d[0], d[1]);
    if (!a) {
      a = new BMap.Geocoder();
      temp.geoCoder = a;
    }
    mapObj.location = d[1] + "," + d[0];
    a.getLocation(b, function(h) {
      if (h.address) {
        Fe.G("currentAddr").innerHTML = h.address;
        mapObj.address = h.address;
      }
      if(h.addressComponents){
        mapObj.city = h.addressComponents.city;
        mapObj.province = h.addressComponents.province;
        window.mapObj = mapObj;
      }
    });

    window.parent.document.getElementsByTagName("h4")[0].click();

    if (e) {
      e.show();
      e.setPosition(b);
    } else {
      e = new BMap.Marker(b, {
        enableMassClear: false
      });
      map.addOverlay(e);
      temp.poiSearchMark = e;
    }
  } else {
    showMessage("请输入正确的坐标");
  }
}

function searchInthisCity(a) {
  l_local.setLocation(a);
  beginsearch(l_local, "cityList");
}

document.onkeydown = function(evt) {
  var evt = window.event ? window.event : evt;
  target = evt.target ? evt.target : evt.srcElement;
  fun = target.getAttribute("callback");
  if (fun && evt.keyCode == 13) {
    eval(fun);
  }
};

function scriptRequest(url, echo, id, charset) {
  var isIe = /msie/i.test(window.navigator.userAgent);
  if (isIe && Fe.G("_script_" + id)) {
    var script = Fe.G("_script_" + id);
  } else {
    if (Fe.G("_script_" + id)) {
      Fe.G("_script_" + id).parentNode.removeChild(Fe.G("_script_" + id));
    }
    var script = document.createElement("script");
    if (charset != null) {
      script.charset = charset;
    }
    if (id != null && id != "") {
      script.setAttribute("id", "_script_" + id);
    }
    script.setAttribute("type", "text/javascript");
    document.body.appendChild(script);
  }
  var t = new Date();
  if (url.indexOf("?") > -1) {
    url += "&t=" + t.getTime();
  } else {
    url += "?t=" + t.getTime();
  }
  var _complete = function() {
    if (
      !script.readyState ||
      script.readyState == "loaded" ||
      script.readyState == "complete"
    ) {
      if (echo == "null") {
        return;
      } else {
        if (typeof echo == "function") {
          try {
            echo();
          } catch (e) {}
        } else {
          eval(echo);
        }
      }
    }
  };
  if (isIe) {
    script.onreadystatechange = _complete;
  } else {
    script.onload = _complete;
  }
  script.setAttribute("src", url);
}

function Page(d, c, e) {
  Fe.BaseClass.call(this);
  if (!d) {
    return;
  }
  this.container = typeof d == "object" ? d : Fe.G(d);
  this.page = 1;
  this.pageCount = 100;
  this.argName = "pg";
  this.pagecap = 4;
  this.callback = c;
  this.update = true;
  var a = {
    page: 1,
    totalCount: 100,
    pageCount: 100,
    pagecap: 4,
    argName: "pg",
    update: true
  };
  if (!e) {
    e = a;
  }
  for (var b in e) {
    if (typeof e[b] != "undefined") {
      this[b] = e[b];
    }
  }
  this.render();
}

Fe.extend(Page.prototype, {
  render: function() {
    this.initialize();
  },
  initialize: function() {
    this.checkPages();
    this.container.innerHTML = this.createHtml();
  },
  checkPages: function() {
    if (isNaN(parseInt(this.page))) {
      this.page = 1;
    }
    if (isNaN(parseInt(this.pageCount))) {
      this.pageCount = 1;
    }
    if (this.page < 1) {
      this.page = 1;
    }
    if (this.pageCount < 1) {
      this.pageCount = 1;
    }
    if (this.page > this.pageCount) {
      this.page = this.pageCount;
    }
    this.page = parseInt(this.page);
    this.pageCount = parseInt(this.pageCount);
  },
  getPage: function() {
    var c = location.search;
    var a = new RegExp("[?&]?" + this.argName + "=([^&]*)[&$]?", "gi");
    var b = c.match(a);
    this.page = RegExp.$1;
  },
  createHtml: function() {
    var b = [],
      f = this.page - 1,
      e = this.page + 1;
    b.push('<p class="page">');
    if (f < 1) {
    } else {
      if (this.page >= this.pagecap) {
        b.push(
          '<span><a href="javascript:void(0)" onclick="Instance(\'' +
            this.hashCode +
            "').toPage(1);\">首页</a></span>"
        );
      }
      b.push(
        '<span><a href="javascript:void(0)" onclick="Instance(\'' +
          this.hashCode +
          "').toPage(" +
          f +
          ');">上一页</a></span>'
      );
    }
    if (this.page < this.pagecap) {
      if (this.page % this.pagecap == 0) {
        var a = this.page - this.pagecap - 1;
      } else {
        var a = this.page - (this.page % this.pagecap) + 1;
      }
      var d = a + this.pagecap - 1;
    } else {
      var c = Math.floor(this.pagecap / 2);
      var h = (this.pagecap % 2) - 1;
      if (this.pageCount > this.page + c) {
        var d = this.page + c;
        var a = this.page - c - h;
      } else {
        var d = this.pageCount;
        var a = this.page - c - h;
      }
    }
    if (
      this.page > this.pageCount - this.pagecap &&
      this.page >= this.pagecap
    ) {
      var a = this.pageCount - this.pagecap + 1;
      var d = this.pageCount;
    }
    for (var g = a; g <= d; g++) {
      if (g > 0) {
        if (g == this.page) {
          b.push("<span>" + g + "</span>");
        } else {
          if (g >= 1 && g <= this.pageCount) {
            b.push(
              '<span><a href="javascript:void(0)" onclick="Instance(\'' +
                this.hashCode +
                "').toPage(" +
                g +
                ');">[' +
                g +
                "]</a></span>"
            );
          }
        }
      }
    }
    if (e > this.pageCount) {
    } else {
      b.push(
        '<span><a href="javascript:void(0)" onclick="Instance(\'' +
          this.hashCode +
          "').toPage(" +
          e +
          ');">下一页</a></span>'
      );
    }
    b.push("</p>");
    return b.join("");
  },
  toPage: function(b) {
    var a = b ? b : 1;
    if (typeof this.callback == "function") {
      this.callback(a);
      this.page = a;
    }
    if (this.update) {
      this.render();
    }
  }
});

function Popup(a) {
  Fe.BaseClass.call(this);
  this.visible = false;
  this.config = a;
  if (!this.config) {
    return;
  }
  this.config.addDom = this.config.addDom
    ? Fe.G(this.config.addDom)
    : document.body;
  if (a.clickClose != null && a.clickClose == false) {
    this.config.clickClose = false;
  } else {
    this.config.clickClose = true;
  }
  this.connectDom = new Array();
}

Fe.extend(Popup.prototype, {
  render: function() {
    var b = this.config;
    this.main = beforeEndHTML(
      b.addDom,
      '<div class="map_popup" style="width:390px;display:none"></div>'
    );
    var a = (this.popBox = beforeEndHTML(
      this.main,
      '<div class="popup_main"></div>'
    ));
    if (b.isTitle != false) {
      this.title = beforeEndHTML(a, '<div class="title">系统信息</div>');
    }
    this.content = beforeEndHTML(a, '<div class="content"></div>');
    if (!!this.config.closeButton) {
      this.button = beforeEndHTML(a, this.config.closeButton);
    } else {
      this.button = beforeEndHTML(a, '<button id="popup_close"></button>');
    }
    this.shadow = beforeEndHTML(this.main, '<div class="poput_shadow"></div>');
    this.addConnectDom(this.main);
    this.initialize();
  },
  initialize: function() {
    var c = this.config;
    this.setTitle(c.title);
    this.setContent(c.content);
    this.setWidth(c.width);
    this.setHeight(c.height);
    this.show();
    var a = this;
    var b = function(d) {
      var f = d.srcElement || d.target;
      while (f) {
        var e = a.connectDom;
        for (var g = 0; g < e.length; g++) {
          if (f == e[g]) {
            return;
          }
        }
        if (f == document.body) {
          a.close();
          return;
        }
        f = f.parentNode;
      }
    };
    if (this.config.clickClose) {
      Fe.on(document.body, "mousedown", b);
    }
    Fe.on(this.button, "click", function(d) {
      if (a.config.clickClose) {
        Fe.un(document.body, "mousedown", b);
      }
      if (a.config.closeEffect && typeof a.config.closeEffect == "function") {
        a.config.closeEffect();
      } else {
        a.main.parentNode.removeChild(a.main);
      }
      a.visible = false;
      if (a.config.close && typeof a.config.close == "function") {
        a.config.close();
      }
      if (this.resizeTimer) {
        window.clearInterval(this.resizeTimer);
        this.resizeTimer = null;
      }
      if (Fe.G("imgLogo")) {
        Fe.G("imgLogo").style.display = "";
        Fe.G("imgLogo").style.display = "inline";
      }
    });
    if (c.open && typeof c.open == "function") {
      c.open();
    }
  },
  setTitle: function(a) {
    if (a && this.title) {
      this.title.innerHTML = a;
      this.config.title = a;
    }
  },
  setContent: function(a) {
    if (a) {
      if (typeof a == "string") {
        this.content.innerHTML = a;
      } else {
        this.content.innerHTML = "";
        this.content.appendChild(a);
      }
      this.config.content = a;
    }
  },
  setWidth: function(a) {
    if (a) {
      this.main.style.width = a - 8 + "px";
      this.config.width = a;
    }
  },
  setHeight: function(a) {
    if (this.resizeTimer) {
      window.clearInterval(this.resizeTimer);
      this.resizeTimer = null;
    }
    if (a) {
      this.main.style.height = this.shadow.style.height = a - 9 + "px";
      this.config.height = a;
      if (this.config.isTitle == false) {
        this.content.style.height = a - 2 + "px";
      } else {
        this.content.style.height = a - 24 - 9 + "px";
      }
      this.content.style.overflowY = "auto";
    } else {
      this.content.style.height = "auto";
      this.resize();
    }
  },
  hide: function() {
    this.main.style.display = "none";
    this.visible = false;
  },
  show: function() {
    this.main.style.display = "block";
    this.popBox.scrollTop = 0;
    this.visible = true;
  },
  getDom: function() {
    return this.main;
  },
  resize: function() {
    var a = this;
    var b = function() {
      if (a.config.isAddBottomHeight == false) {
        var c = a.content.offsetHeight;
      } else {
        var c = a.content.offsetHeight + 24;
      }
      if (a.mainHeight) {
        if (a.mainHeight != c) {
          a.mainHeight = c;
        }
      }
      a.popBox.style.height = a.shadow.style.height = a.main.style.height =
        c + "px";
      a.popBox.scrollTop = 0;
    };
    if (this.resizeTimer) {
      window.clearInterval(this.resizeTimer);
      this.resizeTimer = null;
    }
    this.resizeTimer = window.setInterval(b, 50);
  },
  close: function() {
    this.button.click();
  },
  addConnectDom: function(a) {
    this.connectDom.push(a);
  }
});

function stopBubble(a) {
  var a = window.event || a;
  a.stopPropagation ? a.stopPropagation() : (a.cancelBubble = true);
}

function preventDefault(a) {
  var a = window.event || a;
  a.preventDefault ? a.preventDefault() : (a.returnValue = false);
  return false;
}

晚点将代码上传到github上

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,680评论 2 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,401评论 25 707
  • 明明知道自然界要发生的事不会轻易因为人的意志和行为而转变,还是默默的祈求未来三天别下雨,别下雨,别下雨。海边不要起...
    Yvonne_45d1阅读 112评论 0 0
  • 本节学习内容: 1.UIButton的控件基本概念 2.UIButton的创建方法 3.UIButton的类型 4...
    奔跑的小小鱼阅读 1,843评论 0 1
  • 早上收到一条消息,这句话,甚是喜欢 很直白,诠释了我最大的弱点 或许真的做不到不以物喜,不以己悲了 只能尽最大努力...
    孤叶一舟阅读 130评论 0 1