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

效果图

参考百度效果：百度拾取坐标系统

GitHub上大佬封装的百度拾取的源码

修改了部分源码，删除搜索结果列表功能，坐标反查功能。实现了城市切换，地图搜索功能。关键是获取实时坐标点

使用百度拾取系统

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

1、实现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)