web

# window

Window 对象表示浏览器中打开的窗口。

# window.parent 和 window.top区别

  1. window.parent:
    • window.parent 属性返回当前窗口的父窗口对象。
    • 如果当前窗口是一个iframe，那么window.parent 就是包含这个iframe的父窗口。
    • 如果当前窗口没有父窗口（即它是一个顶级窗口，比如直接通过浏览器打开的页面），那么window.parent 将返回自身（即window.parent === window 会返回true）。
  2. window.top:
    • window.top 属性返回最顶层的窗口对象，即当前窗口所在的最顶层浏览器窗口。
    • 无论当前窗口嵌套了多少层iframe，window.top 总是指向最外层的窗口。
    • 如果当前窗口已经是最顶层窗口，那么window.top 也将返回自身。

这两个属性在跨iframe通信时非常有用。例如，一个嵌套的iframe可能需要与其父窗口或最顶层窗口通信。通过window.parent和window.top，它可以访问这些窗口的window对象，并使用window.postMessage等方法发送消息。

# window.onmessage

window.onmessage 是一个事件处理器，用于监听来自其他窗口（比如iframe、其他标签页或者通过postMessage方法发送消息的窗口）的消息。

当设置 window.onmessage 为一个函数时，这个函数会在窗口接收到消息时被调用。这个函数接收一个事件对象 e 作为参数，该对象包含了与接收到的消息有关的信息。

在 e 对象中，有几个重要的属性：

  • data：这是实际发送的消息内容。它可以是一个字符串、对象（在序列化后发送）等。
  • source：这是发送消息的窗口的引用。你可以使用这个引用来回复消息给发送者。
  • origin：这是发送消息的窗口的源（origin），即协议、域名和端口号。这个属性用于安全地验证消息的来源。
window.onmessage = function (e) {  
  console.log(e.data); // 打印接收到的消息内容  
  e.source.postMessage('我不爱你', e.origin); // 回复消息给发送者  
}

# window.URL.createObjectURL[预览图片/视频]

通过blob协议实现预览,在base64实现预览中，选择了一个较大的视频，实践过的同学可能也会发现，base64操作需要花费一定时间。如果资源足够大，将花费较长时间，影响用户体验，这就是体现blob协议优点的时候了。

<input type="file" id="videoInput">
  <video src="" alt="预览" id="video" controls="controls" width="400" height="200">
  <script>
    const videoInput = document.getElementById('videoInput');
    videoInput.addEventListener('change', e => {
      previewByURL(e.target.files[0])
    })
    function previewByURL (file) {
      video.src = URL.createObjectURL(file)
    }
  </script>

可以看到，blob主要是通过URL对象上的createObjectURL方法创建一个地址，直接设置给video.src即可，用法非常简单，仅需一行代码。接下来我们看下html重的video.src到底是什么：

可以看到，使用blob协议的一个url，这个 URL 临时缓存起来，一旦网页刷新或卸载，这个 URL 就失效。除此之外，也可以手动调用 URL.revokeObjectURL方法，使 URL 失效。

window.URL.revokeObjectURL(objectURL);

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

const windowURL = window.URL || window.webkitURL; 
const dataURl = windowURL.createObjectURL(document.getElementById('inputimg').files[0]);
console.log(dataURl)//blob:http://127.0.0.1:8848/e13840c7-0515-436c-96e1-e3a0ac993cf1
document.getElementById('imgShow').src =dataURl

  const upload = document.getElementById('upload');
  upload.addEventListener('change', function(e) {
	const file = e.target.files[0];
	
	console.log(file);
	if (!file) {
	  return;
	}
	const { type: fileType, size: fileSize } = file;
	// 图片类型检查
	if (!ACCEPT.includes(fileType)) {
	  alert('不支持上传该格式文件！');
	  upload.value = '';
	  return;
	}
	// 图片大小检查
	if (fileSize > MAXSIZE) {
	  alert('文件超出' + MAXSIZE_STR + '！');
	  upload.value = '';
	  return;
	}
	 document.getElementById("k").src=window.URL.createObjectURL(file)
	console.log(file.result)
	// 压缩文件
	convertImageToBase64(file, (base64Image) => compress(base64Image, uploadImage));
  });

可用于支持预览图片等功能！

# 前端下载json文件

function download(url, name) {
	  const a = document.createElement("a");
	  a.download = name;
	  a.rel = "noopener";
	  a.href = url;
	  // 触发模拟点击
	  // a.dispatchEvent(new MouseEvent("click"));
	  // 或者 a.click()
	  a.click()
	  
	}
	
	const json = {
	  a: 3,
	  b: 4,
	  c: 5,
	  
	  e: [ 1,2,3,4,''],
	  f:{
		  text:"wei"
	  }
	};
	const str = JSON.stringify(json, null, 2);
	
	// 方案一：Text -> DataURL
	const dataUrl = `data:,${str}`;
	console.log(dataUrl)
	download(dataUrl, "demo.json");
	
	// // 方案二：Text -> Blob -> ObjectURL
	// const url = URL.createObjectURL(new Blob(str.split("")));
	// download(url, "demo1.json");
	
	const url = URL.createObjectURL(new Blob([str], { type: 'application/json' })) 
	download(url, "demo1.json");

# 预览word execl pdf

浏览器天然支持pdf文件的预览，至于word和execl，则需要借助微软提供的方法进行预览，那么内网部署的项目需要自己部署响应的服务才可以实现.

if (record.suffix === 'doc' || record.suffix === 'docx' || record.suffix === 'xls' || record.suffix === 'xlsx') {
	  window.open( 'https://view.officeapps.live.com/op/view.aspx?src=' + record.path, '_blank')
}

要线上域名且80端口，否则可能无效

# 预览文件

yarn add react-file-viewer --save

// MyApp.js
import React, { Component } from 'react';
import logger from 'logging-library';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://example.com/image.png'
const type = 'png'

class MyComponent extends Component {
  render() {
    return (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }

  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }
}

注意文件类型，不支持ppt，需要自己适配，且在开发时execl点击表头曾出现过报错，根据实际需求进行容错处理

# window视口位置scroll scrollTo scrollBy 回到顶部

  • 回到顶部功能
  • scrollBy=>scrollBy(0,100):相对于当前视口向下滚动100px
  • scrollTo=>滚动到相对应的坐标点位置
<html>
	<div class='k'>1</div>
	<div class='k'>2</div>
	<div class='k'>3</div>
	<div class='k'>4</div>
	<div class='k'>5</div>
	<div class='k'>6</div>
</html>
<style>
	.k{
		width:300px;
		height:400px;
		border:1px solid red;
	}
</style>
<script type="text/javascript">
	setTimeout(()=>{
			// window.scrollTo(0,0)
			window.scrollTo({
				left:0,
				top:0,
				behavior:'smooth'
			})
	},2000)
</script>

# moveTo moveBy

moveBy 和 moveTo 是 JavaScript 中用于操作浏览器窗口位置的两个方法。这两个方法都是 window 对象的方法，用于控制浏览器窗口在屏幕上的位置。

moveTo() 方法用于将浏览器窗口的左上角移动到指定的屏幕坐标位置。这个方法接受两个参数：x 和 y，分别代表水平坐标和垂直坐标。

window.moveTo(x, y);

moveBy() 方法用于将浏览器窗口按照指定的像素数量移动。与 moveTo() 不同，moveBy() 是相对于窗口当前的位置进行移动的。

window.moveBy(dx, dy);
  • To:类似绝对，moveTo，以左上方原点，移动scrollTo，窗口滚动条横向最左侧或者纵向最上方位置计算，resizeTo：设置为宽高多少的窗口
  • By:类似相对，moveBy，以当前位置为原点，移动，scrollBy，以滚动条当前位置，挪动，resizeBy：以当前宽高为基准，增减
window.resizeTo(800, 600); // 将窗口大小调整为800像素宽，600像素高
window.resizeBy(100, -50); // 将窗口宽度增加100像素，高度减少50像素

window.scrollTo(0, 1000); // 将窗口滚动到垂直位置1000像素处
window.scrollBy(50, -100); // 将窗口向右滚动50像素，向上滚动100像素

window.moveTo(0, 0); // 将窗口左上角移动到屏幕左上角  
window.moveBy(50, 100); // 将窗口向右移动50像素，向下移动100像素

# window.open

参数描述URL一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。
这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，
而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。features一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，
新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。replace一个可选的布尔值。
规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。
  • f1是一个浏览器tab窗口名，可以覆盖重新加载
<html>
	<button id='k1'>k1</button>
	<button id='k2'>k2</button>
</html>

<script type="text/javascript">
	document.getElementById('k1').onclick=function(){
		window.open('https://www.baidu.com','f1')
	}
	document.getElementById('k2').onclick=function(){
		window.open('https://www.youdao.com','f1')
	}
</script>

# Window.getComputedStyle 与 element.style

getComputedStyle() 方法用于获取指定元素的 CSS 样式。

获取的样式是元素在浏览器中最终渲染效果的样式。

window.getComputedStyle(element, pseudoElement)
  • element: 必需，要获取样式的元素。
  • pseudoElement: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null.
<style>
 #elem-container{
   position: absolute;
   left:100px;
   top:200px;
   height:100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
  function getTheStyle(){
    let elem = document.getElementById("elem-container");
    let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。

而不同点就是：

  • element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
  • element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式

可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。

最后更新: 1/3/2025, 8:56:32 PM

← 浏览器 →