Web
🏮现代 JavaScript —— 杂项（Frame 和 window）
00 分钟
2022-9-8
2022-9-15
type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 15, 2022 01:17 PM
Created
Sep 7, 2022 12:18 PM

Frame 和 window

window.open()

打开一个弹窗的语法是 window.open(url, name, params)：
url要在新窗口中加载的 URL。name新窗口的名称。每个窗口都有一个 window.name，在这里我们可以指定哪个窗口用于弹窗。如果已经有一个这样名字的窗口 —— 将在该窗口打开给定的 URL，否则会打开一个新窗口。params新窗口的配置字符串。它包括设置，用逗号分隔。参数之间不能有空格，例如：width=200,height=100。
params 的设置项：
  • 位置:
    • left/top（数字）—— 屏幕上窗口的左上角的坐标。这有一个限制：不能将新窗口置于屏幕外（offscreen）。
    • width/height（数字）—— 新窗口的宽度和高度。宽度/高度的最小值是有限制的，因此不可能创建一个不可见的窗口。
  • 窗口功能：
    • menubar（yes/no）—— 显示或隐藏新窗口的浏览器菜单。
    • toolbar（yes/no）—— 显示或隐藏新窗口的浏览器导航栏（后退，前进，重新加载等）。
    • location（yes/no）—— 显示或隐藏新窗口的 URL 字段。Firefox 和 IE 浏览器不允许默认隐藏它。
    • status（yes/no）—— 显示或隐藏状态栏。同样，大多数浏览器都强制显示它。
    • resizable（yes/no）—— 允许禁用新窗口大小调整。不建议使用。
    • scrollbars（yes/no）—— 允许禁用新窗口的滚动条。不建议使用。
示例：最简窗口
设置中的省略规则：
  • 如果 open 调用中没有第三个参数，或者它是空的，则使用默认的窗口参数。
  • 如果这里有一个参数字符串，但是某些 yes/no 功能被省略了，那么被省略的功能则被默认值为 no。因此，如果你指定参数，请确保将所有必需的功能明确设置为 yes。
  • 如果参数中没有 left/top，那么浏览器会尝试在最后打开的窗口附近打开一个新窗口。
  • 如果没有 width/height，那么新窗口的大小将与上次打开的窗口大小相同。

窗口和弹窗间的访问

💡
同源策略
只有在窗口是同源的时，窗口才能自由访问彼此的内容（相同的协议://domain:port）。
否则，例如，如果主窗口来自于 site.com，弹窗来自于 gmail.com，则处于安全性考虑，这两个窗口不能访问彼此的内容

窗口 → 弹窗

open 调用会返回对新窗口的引用。它可以用来操纵弹窗的属性，更改位置，甚至更多操作。

窗口 ← 弹窗

弹窗也可以使用 window.opener 来访问 opener 窗口。除了弹窗之外，对其他所有窗口来说，window.opener 均为 null。

方法

关闭弹窗

关闭一个窗口：win.close()。
检查一个窗口是否被关闭：win.closed。
从技术上讲，close() 方法可用于任何 window，但是如果 window 不是通过 window.open() 创建的，那么大多数浏览器都会忽略 window.close()。因此，close() 只对弹窗起作用。

移动和调整大小

win.moveBy(x,y)
将窗口相对于当前位置向右移动 x 像素，并向下移动 y 像素。允许负值（向上/向左移动）。
win.moveTo(x,y)
将窗口移动到屏幕上的坐标 (x,y) 处。
win.resizeBy(width,height)
根据给定的相对于当前大小的 width/height 调整窗口大小。允许负值。
win.resizeTo(width,height)
将窗口调整为给定的大小。
还有 window.onresize 事件。

滚动窗口

win.scrollBy(x,y)
相对于当前位置，将窗口向右滚动 x 像素，并向下滚动 y 像素。允许负值。
win.scrollTo(x,y)
将窗口滚动到给定坐标 (x,y)。
elem.scrollIntoView(top = true)
滚动窗口，使 elem 显示在 elem.scrollIntoView(false) 的顶部（默认）或底部。
这里也有 window.onscroll 事件。

弹窗的聚焦/失焦

使用 window.focus() 和 window.blur() 方法可以使窗口获得或失去焦点。此外，这里还有 focus/blur 事件，可以捕获到访问者聚焦到一个窗口和切换到其他地方的时刻。

跨窗口通信

一定要在iframe加载完成后再获取文档

集合：window.frames

获取 <iframe> 的 window 对象的另一个方式是从命名集合 window.frames 中获取：
  • 通过索引获取：window.frames[0] —— 文档中的第一个 iframe 的 window 对象。
  • 通过名称获取：window.frames.iframeName —— 获取 name="iframeName" 的 iframe 的 window 对象。
一个 iframe 内可能嵌套了其他的 iframe。相应的 window 对象会形成一个层次结构（hierarchy）。
可以通过以下方式获取：
  • window.frames —— “子”窗口的集合（用于嵌套的 iframe）。
  • window.parent —— 对“父”（外部）窗口的引用。
  • window.top —— 对最顶级父窗口的引用。

“sandbox” iframe 特性

sandbox 特性（attribute）允许在 <iframe> 中禁止某些特定行为，以防止其执行不被信任的代码。它通过将 iframe 视为非同源的，或者应用其他限制来实现 iframe 的“沙盒化”。
对于 <iframe sandbox src="...">，有一个应用于其上的默认的限制集。
换句话说，一个空的 "sandbox" 特性会施加最严格的限制
以下是限制的列表：
  • allow-same-origin
      • 默认情况下，"sandbox" 会为 iframe 强制实施“不同来源”的策略。换句话说，它使浏览器将 iframe 视为来自另一个源，即使其 src 指向的是同一个网站也是如此。具有所有隐含的脚本限制。此选项会移除这些限制。
  • allow-top-navigation
      • 允许 iframe 更改 parent.location。
  • allow-forms
      • 允许在 iframe 中提交表单。
  • allow-scripts
      • 允许在 iframe 中运行脚本。
  • allow-popups
      • 允许在 iframe 中使用 window.open 打开弹窗。

跨窗口通信

postMessage 接口允许窗口之间相互通信，无论它们来自什么源。
win.postMessage(data, targetOrigin)
参数：
  • data
      • 要发送的数据。可以是任何对象，数据会被通过使用“结构化序列化算法（structured serialization algorithm）”进行克隆。IE 浏览器只支持字符串，因此我们需要对复杂的对象调用 JSON.stringify 方法进行处理，以支持该浏览器。targetOrigin指定目标窗口的源，以便只有来自给定的源的窗口才能获得该消息。
  • targetOrigin 
      • 是一种安全措施。请记住，如果目标窗口是非同源的，我们无法在发送方窗口读取它的 location。因此，我们无法确定当前在预期的窗口中打开的是哪个网站：用户随时可以导航离开，并且发送方窗口对此一无所知。
      指定 targetOrigin 可以确保窗口仅在当前仍处于正确的网站时接收数据。在有敏感数据时，这非常重要。
onmessage
为了接收消息，目标窗口应该在 message 事件上有一个处理程序。当 postMessage 被调用时触发该事件（并且 targetOrigin 检查成功）。
event 对象具有特殊属性：
  • data
      • 从 postMessage 传递来的数据。
  • origin
      • 发送方的源，例如 http://javascript.info。
  • source
      • 对发送方窗口的引用。如果我们想，我们可以立即 source.postMessage(...) 回去。
要为 message 事件分配处理程序，我们应该使用 addEventListener，简短的语法 window.onmessage 不起作用。
 
参考链接：
  1. Frame 和 window (javascript.info)
上一篇
现代 JavaScript —— 杂项（二进制 数据 & 文件 ）
下一篇
现代 JavaScript —— 浏览器
评论
Loading...