前端 父子页面间调用 iframe跨域

1. 父页面调子页面

window.onload = function () {
    1、 document.getElementById("子页面元素ID").contentWindow.子页面方法名;
    2、 document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名;
    3、 document.getElementsByClassName("子页面元素类名")[i].contentWindow.子页面方法名;
  }

父调子元素：
window.onload = function () {
	$(iframe选择器).contents().find(iframe中元素选择器);
}
父调子方法：
window.onload = function () {
	$(iframe选择器)[0].contentWindow.子页面方法名;
}

2. 子页面调父页面

子调父元素：
window.onload = function () {
	1、window.parent.document.getElementById("父页面元素ID");
	2、window.parent.document.getElementsByTagName("父页面元素标签名")[i];
	3、window.parent.document.getElementsByClassName("父页面元素类名")[i];
}
 
子调父方法：
window.onload = function () {
	window.parent.父页面方法;
}

 
子调父元素：
window.onload = function () { 
	$(父页面元素选择器, window.parent.document);
 	window.parent.$(父页面元素选择器)window.parent.父页面方法;
}
 
子调父方法：
window.onload = function () { 
	window.parent.父页面方法;
}

3. 创建iframe

	<div id="bar" name="iframe" style="width: 300px; height: 600px; float: right; position: fixed; top: 0; right: 0; z-index: 9999; background: #d5d1d1;">     
    </div>


	/**
 	* 动态创建iframe
    * @param dom 创建iframe的容器，即在dom中创建iframe。dom可以是div、span或者其他标签。
    * @param src iframe中打开的网页路径
    * @param onload iframe加载完后触发该事件，可以为空
    * @return 返回创建的iframe对象
    */
    function createIframe(dom, src, onload) {
        //在document中创建iframe
        var iframe = document.createElement('iframe');
        iframe.id = 'myIframe';

        //设置iframe的样式
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.margin = '0';
        iframe.style.padding = '0';
        iframe.scrolling = 'yes';
        iframe.frameborder = '0';
        iframe.style.overflow = 'hidden';
        iframe.style.border = 'none';
       // iframe.sandbox ='allow-scripts allow-same-origin';

        //绑定iframe的onload事件
        if (onload && Object.prototype.toString.call(onload) === '[object Function]') {
            if (iframe.attachEvent) {	//兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
                iframe.attachEvent('onload', onload);
            } else if (iframe.addEventListener) {	//兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
                iframe.addEventListener('load', onload);
            } else {
                iframe.onload = onload;
            }
        }
        iframe.src = src;
        //把iframe加载到dom下面
        dom.appendChild(iframe);
        return iframe;
    }

	var url = 'hovering_bar.html';//内嵌地址
    createIframe(document.getElementById('bar'), url, onload);
    
	function onload(){
        console.log('加载完成！')
    };

4 . 相关
前端常见的跨域解决方案