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

2023-10-26

定义和用法

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

window.open()打开新页面,并往新页面插入内容 的相关文章

  • 线程池的优点

    线程池的优点 普通线程 线程池 普通线程 通常我们使用new Thread 新建线程 但是这样新建的线程会缺乏统一管理 会导致线程之前存在竞争 从而过多占用系统的资源导致效率变低 而且这种线程功能比较单一 相较于线程池无法定时 定期执行线程

随机推荐

  • 操作系统内存管理

    内存管理 一级目录 二级目录 三级目录 虚拟内存空间 分段内存 段选择符 段描述符 分页内存 逻辑地址 虚拟地址和线性地址的关系 分页管理 概念 页式管理 说明 步骤 硬件高速缓存 内存管理的结构体 总览 struct page struc
  • 7.26作业

    百钱买百鸡 include
  • Leetcode 53最大子序和

    最大子序和 给定一个整数数组 nums 找到一个具有最大和的连续子数组 子数组最少包含一个元素 返回其最大和 示例 输入 2 1 3 4 1 2 1 5 4 输出 6 解释 连续子数组 4 1 2 1 的和最大 为 6 进阶 如果你已经实现
  • Backtrader 获得上个交易日的日期

    在策略类backtrader Strategy中使用 self datetime date 1 即可得到上个交易日 但是不能得到下个交易日的日期 因为目前还没有循环过这个时间
  • filebrowser文件管理系统详细使用说明

    1 所有可用参数 a address string 要侦听的地址 默认值为 127 0 0 1 b baseurl string 基础url cache dir string 文件缓存目录 如果为空则禁用 t cert string tls
  • Ubuntu双系统启动时卡死解决办法

    ubuntu双系统启动时卡死解决办法 在ubuntu16 04和18 04测试无误 问题描述 在安装完ubuntu双系统后 第一次启动ubuntu系统时 卡死在启动界面 或者黑屏 这大概都是由于显卡驱动的原因 具体不在这里阐述 通过以下方法
  • flink-cdc 实现oracle 实时同步到kudu

    其实网上也有很多相关话题的代码实现 但是发现有很多坑 在 腾讯官方文档中 有介绍 但是屏蔽了很多细节 我做了以下四点修改才能正常运行 1 前置条件 保证oracle中相关表开启了归档日志和补充日志 因为flink cdc基于debezium
  • IOS 多线程初探(二) - Operation Object

    上次简单介绍了使用NSThread来创建线程的方法 今天简单介绍使用Operation Object来创建线程 Operation Object简介 将要执行的任务 即函数 封装成操作对象NSOperation 并将对象放置到NSOpera
  • [C++STL] 严格弱序(less函数、小于号重载)

    前言 严格弱序 stick weak ordering 在以下场景会涉及到 对一个容器进行排序时 如使用std sort 使用有序关联容器时 如使用std set std map 使用std less时 重载 lt 操作符 小于 其中 st
  • Vue 中使用 v-for 展示不同的图片

    1 示例前提 展示一个数组对象数据 数组对象中没有图片字段 图片字段在本地保存 根据不同的id 下标 展示不同的图片 示例代码 template 中的代码
  • 数字图像处理扭曲效果——挤压效果

    挤压效果 挤压效果是将图像向内挤压 产生收缩变形 挤压效果的实现可以看成是数学极坐标的一种体现 将当前像素点 图像正中心点和过中心点的水平线这三要素画出一个极坐标 然后根据用户指定的挤压度 在当前点与中心点所连的直线上映射出一个像素点 最后
  • VulnHub-Tr0II

    一 信息收集 将靶机部署好之后改成NAT模式 扫描本网段发现目标ip 进一步探测ip 通过进一步的探测发现目标开启了21 22 80三个端口 先去80端口看一眼web服务 一张图没其它内容 扫一下目录看看 挨个访问也没有啥特殊的地方 考虑一
  • PropertyDescriptor获取非标准java bean属性的getter和setter时候的一个问题

    1 import java beans IntrospectionException 2 import java beans PropertyDescriptor 3 import java lang reflect InvocationT
  • 显著性水平对应的临界值_统计学问题 常有的显著性水平a 所对应的Z值是哪些...

    展开全部 z a 2 指的是标准正态分布的双侧临界值 z a 当然就是单侧临界值 a 阿尔法 指62616964757a686964616fe4b893e5b19e31333431356638的是显著水平 一般是0 05 0 01等 而95
  • Java 动态代理,invoke() 自动调用原理,invoke() 参数

    Java 动态代理 invoke 自动调用原理 invoke 参数 本文介绍了静态代理和动态代理的概念 并且用代码 注释 图示和源码的方式来分析动态代理原理和invoke 自动调用原理 学习动态代理 先从静态代理入手 静态代理 假如现在我们
  • 每日一练——Python字典格式读取文件

    现有一个user csv文件 内容如下 name username email 杨洋 yangy yangy sina com 贾子豪 jiazh jiazh 126 com 于飞 yuf yuf 163 com 田宇辰 tianych t
  • HttpGet和HttpPost请求

    HttpPost请求 public static void main String args throws IOException String url null 请求地址 Map
  • 分类预测

    作者简介 热爱科研的Matlab仿真开发者 修心和技术同步精进 matlab项目合作可私信 个人主页 Matlab科研工作室 个人信条 格物致知 内容介绍 极限学习机 作为一种新兴的机器学习方法 已经成为了一个热门的研究方向 随机确定单隐含
  • [机器学习与scikit-learn-23]:算法-聚类-KMeans算法的工作原理

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 目录 第1章 KMeans概述 1 1 什么是簇与质心 1 2 质心的计算过程 第2章 聚合指标 2 1 距离和度量方法 2 2 聚合的意义
  • window.open()打开新页面,并往新页面插入内容

    定义和用法 open 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口 语法 window open URL name specs replace 参数说明参考https www runoob com jsref met win ope