window.open()打开新页面，并往新页面插入内容

定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace)

参数说明参考https://www.runoob.com/jsref/met-win-open.html

参数说明

 

URL可选，例如http://www.baidu.com，或者项目中其他页面的路径（绝对路径或相对路径），如果不填路径，就是打开一个空白页面，可以插入自定义内容，例如图片，div等元素。

name值可以是填入新打开页面的名称，也可以是_blank（默认）等属性，如果不设置width，height等属性，那么新打开页面的大小默认为整个浏览器页面尺寸。

 

现在需求是这样，新开一个页面，创建一个img标签并接收src值，不在项目里新建页面，直接使用window.onload()打开空白页面，并插入img，设置src属性等。代码如下：

<input type="button" value="打开窗口" onclick="openWin()" />
<script>
function show1() {
        var id = window.open("","_blank");
    	id.document.body.innerHTML="<div >ABCD</div>";
	    var img = new Image(); //创建img标签	
	
	    img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1688026885,2773767715&fm=26&gp=0.jpg';
        //	img.classList.add('imgSty');//.imgSty样式是在此样式定义的，但是跳转的新页面没有此样式，因此无效
				
	    imgSty = 'width: 100px; height: 100px; border: 1px solid #67C23A;';
        //	img.style = imgSty; //非ie浏览器使用此方法
	    img.style.width = '100px'; //ie浏览器需要逐个设置属性，否则无效，因为ie下认为属性是只读属性
	    img.style.width = '100px';
	    img.style.border = '2px solid #000';
				
	    id.document.write(img.outerHTML); //不能是img
	    id.document.write("<div style='width:100px; height:50px;border: 1px solid #000;'>123</div>"); 
	    id.document.title="二代身份证打印67"; // 设置新页面标题，谷歌无效，360，ie好使
    }
</script>

注意：id.document.write()，不能直接写在<script>标签里，或者写在window.onload里，会报错，如下图。需要将id.document.write() 写在 function中，通过点击事件或其他事件触发此function