js的Window--js详解(八)

最新推荐文章于 2019-07-03 18:52:02 发布
最新推荐文章于 2019-07-03 18:52:02 发布
阅读量172 收藏
点赞数
分类专栏： js 文章标签： js的window.opener window.opener js详解 微风
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosa3134/article/details/84795790
版权

js中的Window有很多属性与方法，在这里不一一讲解了，主要讲解下window.opener，下面用祝福语例子讲解下：

window.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	</script>
</head>
<body>
	<div id="welcome">欢迎进行我们的网站</div>
	<a href="#" οnclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a>
	<br/>
	<a href="#" οnclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a>
	<div id="bless"></div>
</body>
</html>

 bless.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function bless() {
		//获取输入的祝福语
		var mb = document.getElementById("mb").value;
		//获取父类窗口
		var p = window.opener;
		//获取父类窗口中的id为bless的div
		var pd = p.document.getElementById("bless");
		//设置pd的值
		pd.innerHTML = mb;
		//关闭当前窗口
		window.close();
	}
	</script>
</head>
<body>
	输入祝福语:<input type="text" size="40" id="mb"/><input type="button" οnclick="bless()" value="输入" />
</body>
</html>

 提醒下：google浏览器好像不支持window.opener，可能是没有了解到，如有知道的请解答下，谢谢

xiaosa3134
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript -- this详解
qq_48113035的博客
04-01 2953
一、第一章：关于this 1.两个误解 ●this指向函数自身 ●this指向函数的作用域 2.this究竟是什么？ this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。 二、第二章：this全面解析 1.调用位置 最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的 调用位置就在当前正在执行的函数的前一个调用中。 2.绑定规则 (1)默认绑定 (2)
js中obj与json之间的转换
xiaosa3134的专栏
04-27 1637
简单介绍： JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Py...
JavaScript进阶（二）window对象
jwang的博客
11-06 236
前言        本章学习JS的window对象的相关知识 方法        特别的,window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。 一、框体方法 alert(内容) 该方法提示一个警告信息，没有返回，这个我们已经用了多次了，这次终于知道怎么回事了！ 例子我也不多说了。 confirm(内容) 该方法是一个确认框，提示用...
js window常见属性和方法
DJL296336953的专栏
03-26 529
screen常见属性： height  客户屏幕的高度； width  客户屏幕的宽度； availHeight   屏幕可展示区域(如去掉任务栏部分)高度； availWidth  屏幕可展示区域(如去掉任务栏部分)宽度； colorDepth  控制面板中设置的颜色位数；
JS-WINDOW
成长日记的博客
07-03 413
所有浏览器都支持window对象，他表示浏览器窗口 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员 全局变量是window对象的属性 全局函数是window对象的方法 window的方法 window.open()-打开窗口 window.close()-关闭当前窗口 window.moveTo()-移动当前窗口 window.resizeTo()-...
Javascript window对象详解
10-25
本文详细介绍了JavaScript的window对象。Windows对象是一个顶层对象，而不是另一个对象的属性即浏览器的窗口。
javascript表单验证和Window详解
10-25
主要详细介绍了javascript表单验证和Window，并附上了示例代码，非常使用，对于我们更好的了解表单验证和Window很有帮助，这里推荐给大家
JavaScript中window.open用法实例详解
12-10
本文较为详细的分析了JavaScript中window.open用法。分享给大家供大家参考。具体如下： 代码如下:[removed] window.open (‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, ...
JavaScript中window.showModalDialog()用法详解
10-25
主要介绍了JavaScript中window.showModalDialog()用法详解,需要的朋友可以参考下
JavaScript中window和document用法详解
10-15
主要介绍了JavaScript中window和document用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js批量给form表单赋值
xiaosa3134的专栏
04-19 4678
/** * 批量赋值 * @param obj */ function loadData(obj){    var key,value,tagName,type,arr;    for(x in obj){        key = x;        value = obj[x];        $("[name='"+key+"'],[name='"+key+"[]']")...
js的obj--js详解(三)
xiaosa3134的专栏
04-30 2096
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;me
js的extends--js详解(十四)
xiaosa3134的专栏
05-03 1310
 1、基于原型链的方式 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt;
浏览器中Backspace不可用
xiaosa3134的专栏
08-13 982
//浏览器中Backspace不可用 $(document).keydown(function(e){ var keyEvent; if(e.keyCode==8){ var d=e.srcElement||e.target; //只是防止input和textarea ...
javascript中的window.opener讲解
xiaosa3134的专栏
08-13 936
定义和用法 opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。 语法 window.opener 提示和注释 注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。   实例: 下...
js的hello--js详解(一)
xiaosa3134的专栏
04-30 304
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;me
iframe调用子iframe的方法，子调用父iframe的方法
xiaosa3134的专栏
11-08 302
在index.html页面中有  &lt;script type="text/javascript"&gt;  function test(){   alert('test() success!');  } &lt;/script&gt; &lt;body&gt;    &lt;a href="#" onclick="frame1.window.childFunction();"&am
vue-quill-editor 中editorOption配置详解
最新发布
05-12
`vue-quill-editor` 是一个基于 `Quill.js` 的富文本编辑器组件，它提供了丰富的配置选项，可以根据需求进行定制。其中 `editorOption` 就是一个非常重要的配置项，它用来配置 `Quill.js` 的选项。 下面是 `editorOption` 的一些常见配置选项及其含义： - `modules`：配置 `Quill.js` 的模块。可以配置的模块包括 toolbar、syntax、history 等。例如，可以通过设置 `modules.toolbar` 来配置工具栏的选项。 - `placeholder`：设置编辑器的占位符文本。 - `readOnly`：设置编辑器是否只读。 - `theme`：设置编辑器的主题。可以设置为 `"snow"`（默认）或 `"bubble"`。 - `bounds`：设置编辑器的边界。可以设置为 `"self"`（默认，表示编辑器本身）或 `"window"`。 - `formats`：配置支持的格式。可以配置的格式包括 bold、italic、underline、strike、link 等。 - `style`：自定义编辑器的样式。 - `scrollingContainer`：设置编辑器的滚动容器。 - `toolbar`：配置工具栏的选项。包括工具栏的位置、按钮的配置等。 除了上述常见配置选项外，还有许多其他的配置选项，可以根据需求进行定制。需要注意的是，`editorOption` 是一个对象，可以通过直接修改对象的属性来进行配置，也可以通过传递一个包含配置选项的对象来进行配置。例如： ```javascript <template> <div> <vue-quill-editor :editor-option="editorOption"></vue-quill-editor> </div> </template> <script> export default { data () { return { editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], [{ 'indent': '-1' }, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'], ['link', 'image', 'video'] ] }, placeholder: '请输入内容...', theme: 'snow' } } } } </script> ``` 以上示例中，通过 `editorOption` 对象来配置了工具栏、占位符文本和主题。其中，工具栏的配置项比较复杂，包括了许多按钮的配置，可以根据需求进行定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值