在Web开发中，有时我们需要在不同的`iframe`和父页面（或主窗口）之间传递参数。这可以通过多种方式实现，下面是一些常见的方法：

### 1. URL参数（查询字符串）

你可以在`iframe`的src属性中附加查询字符串来传递参数。例如：

```html
<iframe src="page.html?param1=value1&param2=value2" ></iframe>
```

在`iframe`内部的页面`page.html`中，你可以使用JavaScript来读取URL参数：

```javascript
const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1'); // value1
const param2 = urlParams.get('param2'); // value2
```

### 2. JavaScript `postMessage` 方法

`postMessage`方法允许安全地实现跨源通信。父页面可以向`iframe`发送消息，反之亦然。例如，父页面可以这样发送消息给`iframe`：

```javascript
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello there!', '*');
```

然后在`iframe`中监听消息事件：

```javascript
window.addEventListener('message', (event) => {
    // 检查 event.origin 是否是你所期望的源
    // if (event.origin !== 'http://example.com') return;

    console.log('Received message:', event.data);
});
```

### 3. `window.name` 属性

`window.name`属性可以在不同页面之间持久化字符串数据。你可以在加载`iframe`之前设置它的`name`属性：

```javascript
const iframe = document.createElement('iframe');
iframe.name = JSON.stringify({ param1: 'value1', param2: 'value2' });
document.body.appendChild(iframe);
iframe.src = 'page.html';
```

然后在`iframe`页面中，可以通过`window.name`来访问这些参数：

```javascript
const params = JSON.parse(window.name);
```

### 4. 直接访问`iframe`的内容

如果`iframe`是同源的，你可以直接通过JavaScript访问`iframe`的DOM，并对它进行操作：

```javascript
const iframe = document.getElementById('myIframe');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.getElementById('someElement').textContent = '新的文本内容';
```

### 示例

假设我们想通过JavaScript `postMessage` 方法将参数传递给一个`iframe`。我们可以这样做：

父页面代码：

```html
<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="iframePage.html" style="height:200px;width:100%;"></iframe>
    <script>
        const iframe = document.getElementById('myIframe');
        const data = { param1: 'value1', param2: 'value2' };

        // 确保iframe完全加载后发送数据
        iframe.onload = function() {
            iframe.contentWindow.postMessage(JSON.stringify(data), '*');
        };
    </script>
</body>
</html>
```

`iframe`页面代码（`iframePage.html`）：

```html
<!DOCTYPE html>
<html>
<head>
    <title>Iframe Page</title>
</head>
<body>
    <div id="message">Waiting for message...</div>
    <script>
        window.addEventListener('message', (event) => {
            // 这里可以增加对 event.origin 的验证，以确保消息来源的安全性
            // if (event.origin !== 'http://example.com') return;

            const data = JSON.parse(event.data);
            document.getElementById('message').textContent = 'Received param1: ' + data.param1;
        });
    </script>
</body>
</html>
```

在实际应用中，选择哪种方法取决于具体情况，如是否跨域、是否需要双向通信等。使用`postMessage`时，安全性非常重要，因此一定要验证消息的来源和内容。

取决于您的具体情况，但如果 iframe 可以在页面其余部分加载_后部署，您可以简单地使用查询字符串，如下所示：_

    <iframe src="some_page.html?somedata=5&more=bacon"></iframe>
    

然后在 some\_page.html 中的某个地方：

    <script>
    var params = location.href.split('?')[1].split('&');
    data = {};
    for (x in params)
     {
    data[params[x].split('=')[0]] = params[x].split('=')[1];
     }
    </script>

首先，您需要了解您有两个文档：框架和容器（包含框架）。

从容器操纵框架的主要障碍是框架异步加载。您不能随时访问它，您必须知道它何时完成加载。所以你需要一个技巧。通常的解决方案是在框架中使用`window.parent`“向上”（进入包含`iframe`标签的文档）。

现在您可以调用容器文档中的任何方法。此方法可以操作框架（例如使用您需要的参数_在_框架中调用一些 JavaScript）。要知道何时调用该方法，您有两种选择：

1.  从框架的 body.onload 调用它。
    
2.  将脚本元素作为最后一个元素放入调用容器方法的框架的 HTML 内容中（留给读者作为练习）。
    

所以框架看起来像这样：

    <script>
    function init() { window.parent.setUpFrame(); return true; }
    function yourMethod(arg) { ... }
    </script>
    <body onload="init();">...</body>
    

容器是这样的：

    <script>
    function setUpFrame() { 
        var frame = window.frames['frame-id'].contentWindow;
        frame.yourMethod('hello');
    }
    </script>
    <body><iframe name="frame-id" src="..."></iframe></body>

这是另一个解决方案，如果框架来自不同的域，则可以使用。

    var frame = /*the iframe DOM object*/;
    frame.contentWindow.postMessage({call:'sendValue', value: /*value*/}, /*frame domain url or '*'*/);
    

在框架本身中：

    window.addEventListener('message', function(event) {
        var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
        if (origin !== /*the container's domain url*/)
            return;
        if (typeof event.data == 'object' && event.data.call=='sendValue') {
            // Do something with event.data.value;
        }
    }, false);
    

但不知道哪些浏览器支持此功能。

还有两个选项，这不是最优雅的，但可能更容易理解和实现，特别是在 iframe 需要从其父级获取的数据只是几个变量而不是复杂对象的情况下：

**使用 URL 片段标识符 (#)**

在容器中：

    <iframe name="frame-id" src="http://url_to_iframe#dataToFrame"></iframe>
    

在 iFrame 中：

    <script>
    var dataFromDocument = location.hash.replace(/#/, "");
    alert(dataFromDocument); //alerts "dataToFrame"
    </script>
    

**使用 iFrame 的名称**

（我不喜欢这个解决方案 - 它滥用了 name 属性，但它是一个选项，所以我将其记录在案）

在容器中：

    <iframe name="dataToFrame" src="http://url_to_iframe"></iframe>
    

在 iFrame 中：

    <script type="text/javascript">
    alert(window.name); // alerts "dataToFrame"
    </script>

使用[框架集合](https://developer.mozilla.org/En/DOM/Window.frames)。

从链接：

    var frames = window.frames; // or // var frames = window.parent.frames;
    for (var i = 0; i < frames.length; i++) { 
      // do something with each subframe as frames[i]
      frames[i].document.body.style.background = "red";
    }
    

如果 iframe 有名称，您还可以执行以下操作：

    window.frames['ponies'].number_of_ponies = 7;
    

仅当这两个页面由同一域提供时，您才能执行此操作。

如何从窗口向 iframe 传递值

当您希望防止其他第三方网站通过iFrame加载您的网站页面时，可以采取多种措施来加强安全性和保护网站内容。以下是一些方法：

### 1. 使用X-Frame-Options HTTP响应头

`X-Frame-Options`是一个HTTP响应头，用于控制网页是否有权在iframe、frame、embed或object中显示。您可以设置以下几种值：

- `DENY`：不允许任何网站通过框架展示本网站的页面。
- `SAMEORIGIN`：只允许同源的网站通过框架展示本网站的页面。
- `ALLOW-FROM uri`：只允许特定的URI通过框架展示本网站的页面。

例如，如果您想要完全禁止在iframe中加载您的页面，您可以在您的服务器配置中添加以下指令：

```http
X-Frame-Options: DENY
```

### 2. 使用Content Security Policy (CSP)

Content Security Policy是一个更加现代和灵活的方式，它允许网站管理员定义页面可以如何执行，还包括指定哪些资源可以被嵌入。通过设置CSP的`frame-ancestors`指令，您可以控制哪些父级页面可以嵌入您的内容。例如：

```http
Content-Security-Policy: frame-ancestors 'self'
```

这个指令告诉浏览器只允许来自同一源的父页面嵌入内容。如果想要允许特定的第三方域名，可以直接列出它们：

```http
Content-Security-Policy: frame-ancestors 'self' https://example.com
```

### 3. JavaScript 基于域的检查

虽然不是最可靠的方法，因为用户可以禁用JavaScript或者绕过这些检查，但您还可以使用JavaScript来检查您的页面是否被第三方网站嵌入。以下是一个简单的例子：

```javascript
if (window.top !== window.self) {
    window.top.location = window.location;
}
```

这段代码检查当前页面是否是顶级窗口，如果不是，它会尝试通过改变顶级窗口的地址来跳出iframe。

### 结合使用

为了最大化安全性，建议结合使用上述几种方法。例如，您可以在您的服务器设置中使用`X-Frame-Options`和CSP，并在您的前端代码中添加JavaScript检查作为附加的安全措施。

### 示例：配置 Apache 服务器

如果您的网站运行在Apache服务器上，您可以在`.htaccess`文件中设置`X-Frame-Options`：

```apache
Header always set X-Frame-Options "DENY"
```

并且配置CSP：

```apache
Header always set Content-Security-Policy "frame-ancestors 'self'"
```

这样配置后，Apache服务器会自动为所有页面响应添加这些HTTP头。

### 注意事项

- 需要注意的是，`X-Frame-Options`已经被CSP的`frame-ancestors`指令替代，但由于旧浏览器可能不支持CSP，为了兼容性，可能需要同时使用两种方法。
- 对于任何安全措施，都应当定期审查和测试以确保它们仍然有效，并且随着浏览器和网站安全标准的发展进行更新。

您无法从服务器端检查它，但您可以在页面加载后使用 JavaScript 来检测它。比较`top`和`self`，如果它们不相同，则您处于一个框架中。

此外，一些现代浏览器尊重`X-FRAME-OPTIONS`标头，它可以有两个值：

*   DENY – 如果页面包含在框架中，则阻止呈现该页面
*   SAMEORIGIN – 与上面相同，除非页面与顶级框架集持有者属于同一域。

用户包括Google的Picasa，它不能嵌入框架中。

支持标头的浏览器，最低版本：

*   IE8 和 IE9
*   歌剧 10.50
*   狩猎4
*   铬4.1.249.1042
*   Firefox 3.6.9（带有[NoScript](https://addons.mozilla.org/firefox/addon/722)的旧版本）

Stackoverflow 包含一些 JS 来测试它 ( `master.js`)。这是它的相关部分：

    if(top!=self){
        top.location.replace(document.location);
        alert("For security reasons, framing is not allowed; click OK to remove the frames.")
    }
    

但请记住，JS 可以被禁用。

对于[现代浏览器](http://caniuse.com/contentsecuritypolicy "CSP 浏览器支持")，您可以使用CSP（内容安全策略），这是一个标准。以下标头将阻止文档在任何位置加载到框架中：

    Content-Security-Policy: frame-ancestors 'none'
    

`X-`（不过IE 11 需要前缀）。您还可以更改`'none'`为允许框架的来源，例如您自己的网站。

为了覆盖较旧的浏览器，最好与[@Maerlyn 的答案](https://stackoverflow.com/a/2896705/1079573)一起使用。

您可以使用 javascript 阻止在 iframe 中加载页面

    <script type="text/javascript">
    if ( window.self !== window.top ) {
        window.top.location.href=window.location.href;
    }
    </script>
    

此代码将页面 iframe 容器的地址更改为您的页面地址，并强制容器显示您的页面。

或者，如果您不介意您的内容出现在某些位置，但又不想出现在某个网站上，则可以阻止特定域。例如，如果`offendingdomain.com`要嵌入您的内容，您可以这样做：

    <script type="text/javascript">
        if(document.referrer.indexOf("offendingdomain.com") != -1) {
            window.location = "http://www.youtube.com/watch_popup?v=oHg5SJYRHA0";
        }
    </script>
    

这将检查父文档的位置并查看它是否`offendingdomain.com`正在嵌入您的内容。然后，该脚本会将该 iframe 发送到某个著名的 YouTube 视频作为惩罚。事实上，他们只是自己翻滚。

如何禁止我的网站页面被第三方网站通过 iframe 加载？

在浏览器中禁止 `iframe` 页面的缓存可以通过多种方法实现。这些方法通常需要在服务端设置 HTTP 头部或者在 `iframe` 标签的 URL 中添加额外的参数。以下是一些常见的方法：

### 1. 使用 HTTP 头部控制缓存

可以在服务器端设置一些 HTTP 头部信息以避免页面被缓存：

- `Cache-Control: no-store, no-cache, must-revalidate, max-age=0`
- `Pragma: no-cache`
- `Expires: 0`

这些头部指令会告诉浏览器不要存储当前页面的任何副本，每次请求都需要向服务器重新获取。

#### 例子：

如果你使用的是 Apache 服务器，可以在 `.htaccess` 文件中添加以下指令：

```apache
<FilesMatch "\.html$">
    Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
    Header set Pragma "no-cache"
    Header set Expires "0"
</FilesMatch>
```

如果使用的是 PHP，可以在 PHP 脚本开头添加以下代码：

```php
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Pragma: no-cache");
header("Expires: 0");
?>
```

### 2. 在 iframe URL 中添加时间戳

在 `iframe` 的 `src` 属性中添加一个唯一的查询字符串，如时间戳，也可以防止浏览器缓存页面。因为每次 URL 都是唯一的，浏览器会认为是新的资源，从而发送新的请求。

#### 例子：

```html
<iframe src="yourpage.html?nocache=123456789"></iframe>
```

其中 `nocache=123456789` 应该由服务器端生成的当前时间戳替换，以确保每次加载时 URL 都是唯一的。

使用 JavaScript 可以这样设置：

```javascript
var iframe = document.getElementById('yourIframe');
iframe.src = 'yourpage.html?nocache=' + (new Date()).getTime();
```

### 3. 使用 meta 标签

虽然不是最可靠的方式，但您也可以在 `iframe` 页面的 `<head>` 部分使用 `meta` 标签来控制缓存行为。

#### 例子：

```html
<head>
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
</head>
```

总的来说，建议的最佳做法通常是在服务器端设置 HTTP 头部来控制缓存。这种方式是最可靠的，因为它不依赖于前端代码，而是直接由服务器告知浏览器如何处理缓存。

这是 Firefox 中的一个错误：

[https://bugzilla.mozilla.org/show\_bug.cgi?id=356558](https://bugzilla.mozilla.org/show_bug.cgi?id=356558)

尝试这个解决方法：

    <iframe src="webpage2.html?var=xxx" id="theframe"></iframe>
        
    <script>
        var _theframe = document.getElementById("theframe");
        _theframe.contentWindow.location.href = _theframe.src;
    </script>

我已经能够通过`name`在 iframe 上设置一个唯一的属性来解决这个错误 - 无论出于何种原因，这似乎都会破坏缓存。您可以使用您拥有的任何动态数据作为`name`属性 - 或者只是您使用的任何模板语言中的当前毫秒或纳秒时间。这是一个比上面的解决方案更好的解决方案，因为它不直接需要 JS。

在我的特定情况下，iframe 是通过 JS 构建的（但你可以通过 PHP、Ruby 等进行同样的操作），所以我只需使用`Date.now()`：

    return '<iframe src="' + src + '" name="' + Date.now() + '" />';
    

这修复了我测试中的错误；可能是因为`window.name`内部窗口发生了变化。

正如你所说，这里的问题不是**iframe 内容缓存**，而是**iframe url 缓存**。

截至 2018 年 9 月，该问题似乎仍然出现在 Chrome 中，但在 Firefox 中没有。

我已经尝试了很多事情（添加更改的 GET 参数、清除 onbeforeunload 中的 iframe url、使用 cookie 检测“从缓存重新加载”、设置各种响应标头），这是对我有用的唯一两个解决方案：

**1-简单的方法：从 javascript 动态创建 iframe**

例如：

    const iframe = document.createElement('iframe')
    iframe.id = ...
    ...
    iframe.src = myIFrameUrl 
    document.body.appendChild(iframe)
    

**2- 迂回方式**

服务器端，如此处所述[，禁用为 iframe](https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers/2068407#2068407)**或**父页面提供的内容的内容缓存（两者都可以）。

和

使用额外的更改搜索参数从 javascript 设置 iframe url，如下所示：

    const url = myIFrameUrl + '?timestamp=' + new Date().getTime()
    document.getElementById('my-iframe-id').src = url
    

（简化版本，注意其他搜索参数）

要使 iframe 始终加载新内容，请将当前 Unix 时间戳添加到 GET 参数的末尾。然后，浏览器将其视为“不同”请求，并将寻找新内容。

在 Javascript 中，它可能看起来像：

    frames['my_iframe'].location.href='load_iframe_content.php?group_ID=' + group_ID + '&timestamp=' + timestamp;

在尝试了其他所有方法（除了使用 iframe 内容的代理之外）后，我找到了一种防止**来自同一域的**iframe 内容缓存的方法：

使用`.htaccess`重写规则并更改 iframe`src`属性。

`RewriteRule test/([0-9]+)/([a-zA-Z0-9]+).html$ /test/index.php?idEntity=$1&token=$2 [QSA]`

我使用它的方式是 iframe 的 URL 最终看起来像这样：`example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html`

其中 \[token\] 是随机生成的值。此 URL 会阻止 iframe 缓存，因为令牌永远不会相同，并且 iframe 认为这是一个完全不同的网页，因为单次刷新会加载完全不同的 URL：

`example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html`  
`example.com/test/54/d2cc21be7cdcb5a1f989272706de1913.html`

两者都指向同一页面。

您可以使用以下命令访问隐藏的网址参数[`$_SERVER["QUERY_STRING"]`](http://php.net/manual/en/reserved.variables.server.php)

如何防止浏览器中的 iframe 缓存？

这里我可以提供几种常用的方法，并给出相应的实例。

### 方法一：使用 onload 事件

`onload`事件可以用来检测iframe何时完成加载。这是检测iframe是否加载的一个直观且常用的方法。

```html
<iframe id="myIframe" src="example.html" onload="alert('Iframe is loaded');"></iframe>
```

在这个例子中，当iframe加载完成后，会弹出一个提示框告知用户。

### 方法二：使用 JavaScript 检查内容

我们可以通过JavaScript来访问iframe内的文档和元素，从而检测其内容：

```javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDocument.body.children.length > 0) {
        console.log("Iframe 有内容");
    } else {
        console.log("Iframe 为空");
    }
};
```

这段代码首先获取iframe元素，然后在其加载完成后，检查其文档的body是否有子元素。这可以作为内容是否存在的一个简单检验。

### 方法三：定期检查iframe内容

在某些情况下，iframe的内容是动态加载的，可能需要定期检查其内容。可以使用 `setInterval` 来周期性地检查：

```javascript
var checkIframe = setInterval(function() {
    var iframeDocument = document.getElementById('myIframe').contentDocument || document.getElementById('myIframe').contentWindow.document;
    if (iframeDocument.readyState === 'complete') {
        clearInterval(checkIframe);
        if (iframeDocument.body.children.length > 0) {
            console.log("Iframe 加载并有内容");
        } else {
            console.log("Iframe 加载但没有内容");
        }
    }
}, 100);
```

这段代码设置了一个定时器，每100毫秒检查一次iframe的状态，一旦检测到iframe的内容完全加载，就会停止检查，并根据内容的有无来输出结果。

以上就是一些检测iframe是否加载和是否有内容的方法。在实际开发中，您可能需要根据具体情况选择合适的方法。


尝试这个。

    <script>
    function checkIframeLoaded() {
        // Get a handle to the iframe element
        var iframe = document.getElementById('i_frame');
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
        // Check if loading is complete
        if (  iframeDoc.readyState  == 'complete' ) {
            //iframe.contentWindow.alert("Hello");
            iframe.contentWindow.onload = function(){
                alert("I am loaded");
            };
            // The loading is complete, call the function we want executed once the iframe is loaded
            afterLoading();
            return;
        } 
    
        // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
        window.setTimeout(checkIframeLoaded, 100);
    }
    
    function afterLoading(){
        alert("I am here");
    }
    </script>
    
    <body onload="checkIframeLoaded();">

请使用：

    $('#myIframe').on('load', function(){
        //your code (will be called once iframe is done loading)
    });
    

随着标准的变化更新了我的答案。

我遇到了同样的问题，除此之外，我需要检查 iframe 是否已加载，无论跨域策略如何。我正在开发一个 chrome 扩展，它会在网页上注入某些脚本，并在 iframe 中显示父页面的一些内容。我尝试了以下方法，这对我来说非常有效。  
**PS：就我而言，我确实可以控制 iframe 中的内容，但不能控制父网站上的内容。（iframe 托管在我自己的服务器上）**  
  
首先：  
**创建一个带有`data-`属性的 iframe（在我的情况下，这部分位于注入脚本中）**  
`<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>`  
  
现在在 iframe 代码中，使用：

    var sourceURL = document.referrer;
    window.parent.postMessage('1',sourceURL);
    

  
  
现在回到根据我的情况注入的脚本：  

    setTimeout(function(){
      var myIframe = document.getElementById('myiframe');
      var isLoaded = myIframe.prop('data-isloaded');
      if(isLoaded != '1')
      {
        console.log('iframe failed to load');
      } else {
        console.log('iframe loaded');
      }
    },3000);
    

  
和，  

    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event)
    {
        if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
        {
            console.log('URL issues');
            return;
        }
        else {
            var myMsg = event.data;
            if(myMsg == '1'){
                //8-12-18 changed from 'data-isload' to 'data-isloaded
                $("#myiframe").prop('data-isloaded', '1');
            }
        }           
    }
    

  
  
它可能不能完全回答这个问题，但确实是我通过这种方法解决的这个问题的可能情况。

最简单的选择：

    <script type="text/javascript">
      function frameload(){
       alert("iframe loaded")
      }
    </script>
    
    <iframe onload="frameload()" src=...>

您可以使用 iframe 的`load`事件在 iframe 加载时做出响应。

    document.querySelector('iframe').onload = function(){
        console.log('iframe loaded');
    };
    

这不会告诉您是否加载了正确的内容：要检查这一点，您可以检查`contentDocument`.

    document.querySelector('iframe').onload = function(){
        var iframeBody = this.contentDocument.body;
        console.log('iframe loaded, body is: ', body);
    };
    

> 如果 iframe指向与代码运行位置不同的域，则检查`contentDocument`将不起作用。`src`

如何检查 iframe 是否已加载或是否有内容？

不，`iframe` 的 `src` 属性本身不提供添加请求头的能力。`iframe` 标签加载资源时，浏览器会使用默认的 GET 请求，而不能直接在 `src` 属性中指定请求头。

不过，有一些方法可以实现类似的效果，虽然它们不是通过在 `iframe` 的 `src` 中直接添加请求头来实现的。比如：

1. **通过服务端设置**: 你可以在服务端预先设置好请求头，然后当 `iframe` 请求该资源时，服务端会发送这些预设的请求头。这种方式的限制是它不能动态地根据客户端的需要改变请求头。

2. **使用JavaScript和CORS**: 如果你控制了 `iframe` 所加载页面的服务器，可以使用 `fetch` 或 `XMLHttpRequest` 来发送带有自定义请求头的请求，并且可以在收到响应后将内容动态地插入到一个 `iframe` 或其他的 DOM 元素中。这需要服务器支持跨源资源共享 (CORS)，以允许这种类型的请求。

    例如:
    
    ```javascript
    fetch('https://example.com/page', {
      method: 'GET',
      headers: {
        'Custom-Header': 'value'
      }
    })
    .then(response => response.text())
    .then(html => {
      const iframe = document.createElement('iframe');
      document.body.appendChild(iframe);
      iframe.contentWindow.document.open();
      iframe.contentWindow.document.write(html);
      iframe.contentWindow.document.close();
    })
    .catch(error => console.error(error));
    ```

3. **使用服务端代理**: 你可以创建一个服务端代理，该代理会添加所需的请求头，然后 `iframe` 可以指向这个代理。代理会处理来自 `iframe` 的请求，添加请求头，然后将请求转发到最终目标。它还会处理响应，将其返回给 `iframe`。

总的来说，虽然不能直接在 `iframe` 的 `src` 属性中添加请求头，但是你可以使用服务端逻辑或客户端脚本以编程的方式来达到相似的效果。这些方法各有优缺点，适用于不同的场景。

您可以在 JavaScript 中发出请求，设置您想要的任何标头。然后你就可以[`URL.createObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL)得到适合`src`iframe 的东西了。

    var xhr = new XMLHttpRequest();
    
    xhr.open('GET', 'page.html');
    xhr.onreadystatechange = handler;
    xhr.responseType = 'blob';
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.send();
    
    function handler() {
      if (this.readyState === this.DONE) {
        if (this.status === 200) {
          // this.response is a Blob, because we set responseType above
          var data_url = URL.createObjectURL(this.response);
          document.querySelector('#output-frame-id').src = data_url;
        } else {
          console.error('no pdf :(');
        }
      }
    }
    

保留响应的 MIME 类型。因此，如果您收到 html 响应，该 html 将显示在 iframe 中。如果您请求 pdf，浏览器 pdf 查看器将启动 iframe。

如果这是长期存在的客户端应用程序的一部分，您可能需要使用它[`URL.revokeObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)来避免内存泄漏。

对象 URL 也非常有趣。它们的形式是`blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170`. 您实际上可以在新选项卡中打开它们并查看响应，并且当创建它们的上下文关闭时它们将被丢弃。

这是一个完整的示例： https: [//github.com/courajs/pdf-poc](https://github.com/courajs/pdf-poc)

不，你不能。但是，您可以将`iframe`源设置为某种预加载脚本，该脚本使用 AJAX 来获取包含您想要的所有标头的实际页面。

由于 createObjectURL 的贬值，@FellowMD 的答案不适用于现代浏览器，因此我使用了相同的方法，但使用了 iframe srcDoc 属性。

1.  使用 XMLHttpRequest 或任何其他方法检索要在 iframe 中显示的内容
2.  设置iframe的srcdoc参数

请在下面找到一个 React 示例（我知道这有点矫枉过正）：

    import React, {useEffect, useState} from 'react';
    
    function App() {
      const [content, setContent] = useState('');
    
    
      useEffect(() => {
        // Fetch the content using the method of your choice
        const fetchedContent = '<h1>Some HTML</h1>';
        setContent(fetchedContent);
      }, []);
    
    
      return (
        <div className="App">
          <iframe sandbox id="inlineFrameExample"
                  title="Inline Frame Example"
                  width="300"
                  height="200"
                  srcDoc={content}>
          </iframe>
    
    
        </div>
      );
    }
    
    export default App;
    

现在大多数浏览器都支持 Srcdoc。看来 Edge 实现它有点晚了：[https://caniuse.com/#feat=iframe-srcdoc](https://caniuse.com/#feat=iframe-srcdoc)

事实证明， URL.createObjectURL() 在 Chrome 71 中已被弃用  
（请参阅[https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems](https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems)），  
构建于 @Niet 黑暗 Absol 和@FellowMD 的出色答案，如果您需要传递身份验证标头，这里介绍了如何将文件加载到 iframe 中。（您不能只将 src 属性设置为 URL）：  

    $scope.load() {
        var iframe = #angular.element("#reportViewer");
        var url = "http://your.url.com/path/etc";
        var token = "your-long-auth-token";
        var headers = [['Authorization', 'Bearer ' + token]];
        $scope.populateIframe(iframe, url, headers);
    }
    
    $scope.populateIframe = function (iframe, url, headers) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = handler;
        xhr.responseType = 'document';
        headers.forEach(function (header) {
            xhr.setRequestHeader(header[0], header[1]);
        });
        xhr.send();
    
        function handler() {
            if (this.readyState === this.DONE) {
                if (this.status === 200) {
                    var content = iframe[0].contentWindow ||
                        iframe[0].contentDocument.document || 
                        iframe[0].contentDocument;
                    content.document.open();
                    content.document.write(this.response.documentElement.innerHTML);
                    content.document.close();
                } else {
                    iframe.attr('srcdoc', '<html><head></head><body>Error loading page.</body></html>');
                }
            }
        }
    }
    

并向 courajs 致敬：[https ://github.com/courajs/pdf-poc/blob/master/script.js](https://github.com/courajs/pdf-poc/blob/master/script.js)

Iframe 的 src 值是否可以添加请求头？

当iframe页面需要和其父站点进行通信时，主要依靖于JavaScript中的几种机制来实现。下面我将详细介绍几种常见的通信方式及其应用场景：

### 1. 使用`postMessage`方法

`postMessage`是HTML5中引入的一种安全的跨源通信方法。它允许来自不同源的页面进行数据交换，避免了直接通过DOM进行交互可能引起的安全问题。

**父页面向iframe发送消息的例子：**

```javascript
// 在父页面中
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello iframe!', 'http://iframe-domain.com');
```

**iframe接收消息的例子：**

```javascript
// 在iframe中
window.addEventListener('message', function(event) {
    if (event.origin !== 'http://parent-domain.com') {
        // 可以通过检查event.origin来验证发消息方的源
        return;
    }
    console.log('Received message from parent:', event.data);
});
```

### 2. 直接操作DOM元素

如果iframe页面与父页面同源，也就是说它们的协议、域名和端口都相同，那么它们之间可以直接通过JavaScript操作对方的DOM。

**父页面访问iframe DOM的例子：**

```javascript
// 在父页面中
var iframeDocument = document.getElementById('myIframe').contentDocument;
var elementInIframe = iframeDocument.getElementById('someElement');
elementInIframe.innerHTML = 'Hello from parent page!';
```

**iframe访问父页面DOM的例子：**

```javascript
// 在iframe中
var parentDocument = window.parent.document;
var elementInParent = parentDocument.getElementById('someElementInParent');
elementInParent.innerHTML = 'Hello from iframe!';
```

### 3. 使用JavaScript回调函数

在某些情况下，父页面可以将函数作为全局变量或者作为iframe窗口的属性传入，这样iframe就可以直接调用这些函数来与父页面通信。

**父页面提供一个可被iframe调用的函数的例子：**

```javascript
// 在父页面中
function parentFunction(message) {
    console.log('Message from iframe:', message);
}
```

**iframe调用父页面函数的例子：**

```javascript
// 在iframe中
window.parent.parentFunction('Hi, parent!');
```

### 注意事项和安全考虑：

1. 跨域通信时务必使用`postMessage`，并且验证消息来源`event.origin`确保安全。
2. 通过DOM直接操作时要注意跨域问题，只有同源时才能执行。
3. 在使用全局函数进行通信时，要注意可能导致的命名冲突和函数作用域的问题。

通过上述机制，iframe页面和父站点可以有效地进行通信，同时保持安全性和灵活性。在实现这些通信机制时，我们必须考虑到安全性问题，确保不会暴露敏感信息或者允许潜在的恶意行为。

对于不同的域，无法直接调用方法或访问 iframe 的内容文档。

您必须使用[跨文档消息传递](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)。

父级 -> iframe
------------

例如在顶部窗口中：

    myIframe.contentWindow.postMessage('hello', '*');
    

并在 iframe 中：

    window.onmessage = function(e) {
        if (e.data == 'hello') {
            alert('It works!');
        }
    };
    

iframe -> 父级
------------

例如在顶部窗口中：

    window.onmessage = function(e) {
        if (e.data == 'hello') {
            alert('It works!');
        }
    };
    

并在 iframe 中：

    window.top.postMessage('hello', '*')

在 2018 年和现代浏览器中，您可以将自定义事件从 iframe 发送到父窗口。

内嵌框架：

    var data = { foo: 'bar' }
    var event = new CustomEvent('myCustomEvent', { detail: data })
    window.parent.document.dispatchEvent(event)
    

家长：

    window.document.addEventListener('myCustomEvent', handleEvent, false)
    function handleEvent(e) {
      console.log(e.detail) // outputs: {foo: 'bar'}
    }
    

PS：当然，你也可以用同样的方式向相反方向发送事件。

    document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

该库支持 HTML5 postMessage 和带有 resize+hash 的旧版浏览器[https://github.com/ternarylabs/porthole](https://github.com/ternarylabs/porthole)

编辑：现在到了 2014 年，IE6/7 使用率相当低，IE8 及以上都支持`postMessage`，所以我现在建议只使用它。

[https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage)

用于`event.source.window.postMessage`发送回发件人。

来自内嵌框架

    window.top.postMessage('I am Iframe', '*')
    window.onmessage = (event) => {
        if (event.data === 'GOT_YOU_IFRAME') {
            console.log('Parent received successfully.')
        }
    }
    

然后从父母那里说回来。

    window.onmessage = (event) => {
        event.source.window.postMessage('GOT_YOU_IFRAME', '*')
    }
    

### 更新：

`postMessage`不应该在跨域上工作，所以解决方案如下：

例如您的网站是：`customer.com`您的域名是`my.com`

你需要这样做

*   创建一个js文件（上传到CDN或您的服务器）-`my.com`
*   将上面的js文件嵌入到`customer.com`

现在`my.com`，您可以`postMessage`从上面的嵌入脚本接收来自您的数据。

在花了 2 天尝试让 iFrame 将消息发送回父级（在我的情况下是一个 Vue 应用程序）后，我发现了这个出色的参考：

[https://dev-bay.com/iframe-and-parent-window-postmessage-communication/](https://dev-bay.com/iframe-and-parent-window-postmessage-communication/)

从 iframe 到父级：

        const parentWindow = window.parent;
        class Message {
            constructor(type, body) {
              this.type = type;
              this.body = body;
            }
        };
    
        function sendMessage (windowObj, payload) {
            if(windowObj) {
              windowObj.postMessage(payload, "*");
            }
        };
    
        //Then call appropriately: 
        sendMessage(parentWindow, new Message("button-click", "Show Stats Overlay"));
    

在父级中，我的 Vue 应用程序安装了生命周期事件，但请参考您自己的要求的链接：

        window.addEventListener("message", (e) => {
            var data = e.data;
            console.log("RECEIVED message from CHILD TO PARENT", data);
            
            var type = data.type;
            var body = data.body;
    
            if(type === "button-click" && body) {
              console.log("button-click RECEIVED FROM CHILD")
              //Additional functionality ...
            } else if (type === "text-msg" && body) {
              console.log("TEXT MESSAGE RECEIVED FROM CHILD");
              //Additional functionality ...
            }
          });
    

请参阅参考资料以了解从 Parent 到 iFrame 的通信示例。

希望这对其他人有帮助。

如何在 iframe 和父站点之间进行通信

要重新加载或刷新`iframe`，通常有几种方法可以做到，但是哪一种是“最佳”方式可能取决于具体的使用场景和需求。下面是一些常用的方法，以及它们的一个示例：

### 1. 使用 JavaScript 设置 `src` 属性

你可以通过JavaScript设置`iframe`的`src`属性为其当前的URL来刷新该`iframe`。这种方法简单直接。

```javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.src = iframe.src;
}
```

#### 优点

- 易于理解和实现。
- 适用于大多数浏览器和情境。

#### 缺点

- 如果`iframe`的`src`属性是一个会引起POST请求的URL，这种方法可能导致重新提交表单。

### 2. 使用 `location.reload()`

你还可以通过直接调用`iframe`内容窗口的`location.reload()`方法来刷新`iframe`。

```javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    if (iframe.contentWindow) {
        iframe.contentWindow.location.reload(true);
    }
}
```

#### 优点

- 直接调用`location.reload()`可以确保页面是从服务器重新加载的，不会从浏览器缓存中加载。

#### 缺点

- 如果页面有通过POST方式传递的数据，重新加载可能会导致数据重新提交。

### 3. 改变 `src` 属性的查询字符串

有时候，你可能想要避免POST数据的重新提交，可以通过修改`src`属性的查询字符串参数来达到刷新的目的。

```javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    var currentSrc = iframe.src;
    var newSrc = currentSrc.split('?')[0];

    iframe.src = newSrc + '?' + new Date().getTime();
}
```

#### 优点

- 通过改变URL来避免提交POST数据。
- URL的变化会强制浏览器从服务器上重新加载页面，而不是显示缓存的版本。

#### 缺点

- 如果`iframe`的URL中已经有查询字符串，这种方法需要更复杂的处理来保持原有的参数不变。

### 综合考虑

在选择最合适的方法时，你需要考虑几个因素：

- 如果你的`iframe`是包含表单的页面，要防止重新提交表单。
- 是否需要绕过浏览器缓存。
- `iframe`的URL是否已经包含查询字符串。

在实际应用中，我通常会先评估这些因素，并选择最适合当前情况的方法。例如，如果我在开发一个用于显示实时数据的仪表板，并且数据是通过GET请求获取的，我可能会选择第三种方法来避免浏览器缓存，并确保用户总是看到最新的数据。

document.getElementById('some_frame_id').contentWindow.location.reload();
    

注意，在 Firefox 中，`window.frames[]`不能通过 id 进行索引，而是通过名称或索引进行索引

document.getElementById('iframeid').src = document.getElementById('iframeid').src
    

它将重新加载`iframe`，甚至跨域！使用 IE7/8、Firefox 和 Chrome 进行测试。

**注意：**正如 @user85461 所提到的，如果 iframe src URL 中包含哈希（例如），则此方法**不起作用**`http://example.com/#something`。

如果使用 jQuery，这似乎有效：

    $('#your_iframe').attr('src', $('#your_iframe').attr('src'));

将空字符串附加到`src`iFrame 的属性也会自动重新加载它。

    document.getElementById('id').src += '';

window.frames['frameNameOrIndex'].location.reload();

重新加载刷新 iframe 的最佳方式是什么？

Iframe（内联框架）和Object元素是HTML中嵌入内容的两种不同的方式。它们都可以用来嵌入例如视频、音频、PDF文档以及其他网页等内容，但它们之间存在一些关键的区别：

### Iframe：

- **定义**：Iframe 是一个 HTML 元素，可以在当前HTML文档中嵌入另一个独立的HTML文档。
- **使用场景**：通常用于嵌入第三方内容，如地图、视频等。
- **优势**：
  - **隔离性**：Iframe中的内容与父页面是隔离的，它有自己的文档对象模型（DOM）。
  - **安全性**：可以通过沙盒属性(sandbox)为嵌入的页面提供不同级别的限制，以增加安全性。
- **灵活性**：Iframe可以响应式地调整大小，适应不同的视口（viewport）。

### Object：

- **定义**：Object 是一个HTML元素，用于嵌入多种类型的多媒体内容，包括Flash、PDF、Java applets等。
- **使用场景**：通常用于嵌入插件内容，这些内容需要特定的应用程序支持。
- **优势**：
  - **类型支持**：可以包含不同类型的数据，使用`type`属性指定MIME类型。
  - **回退内容**：如果用户的浏览器不支持Object标签或无法加载内容，可以提供回退内容。
- **灵活性**：Object元素也支持使用参数（通过`<param>`标签）来提供给嵌入对象。

### 示例：

**Iframe 示例**：

```html
<iframe src="https://www.example.com" width="600" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>
```
在这个例子中，一个外部网页被嵌入到当前页面中，并设定了宽高。

**Object 示例**：

```html
<object data="file.pdf" type="application/pdf" width="300" height="200">
  <a href="file.pdf">Download PDF</a>
</object>
```
在这个例子中，一个PDF文件被嵌入到网页中，如果浏览器不支持直接显示PDF，用户可以通过提供的链接下载PDF文件。

### 结论：

选择Iframe或Object主要取决于你需要嵌入什么类型的内容以及你对内容的隔离和控制的需求。Iframe 对于嵌入其他HTML文档（如YouTube视频）非常实用，而Object则更多地用于嵌入需要特定插件支持的内容。

`<iframe>`
==========

> iframe 元素表示嵌套的浏览上下文。[HTML 5 标准 - “元素`<iframe>`”](http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element)

主要用于包含来自其他域或子域的资源，但也可用于包含来自同一域的内容。的`<iframe>`优势在于嵌入的代码是“实时”的并且可以与父文档进行通信。

`<embed>`
=========

在 HTML 5 中标准化，在此之前它是一个非标准标签，无可否认，所有主流浏览器都实现了它。HTML 5 之前的行为可能有所不同......

> embed 元素为外部（通常是非 HTML）应用程序或交互式内容提供集成点。（[HTML 5 标准 - “元素`<embed>`”](http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element)）

用于嵌入浏览器插件的内容。SVG 和 HTML 是例外，它们根据标准的处理方式有所不同。

嵌入内容可以做什么和不能做什么的详细信息取决于相关的浏览器插件。但对于 SVG，您可以通过以下方式从父级访问嵌入的 SVG 文档：

    svg = document.getElementById("parent_id").getSVGDocument();
    

从嵌入的 SVG 或 HTML 文档内部，您可以通过以下方式联系父级：

    parent = window.parent.document;
    

对于嵌入的 HTML，无法从父文档（我发现）获取嵌入文档。

`<object>`
==========

> 该`<object>`元素可以表示外部资源，根据资源的类型，该资源将被视为图像、嵌套浏览上下文或由插件处理的外部资源。（[HTML 5 标准 - “元素`<object>`”](http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element)）

结论
==

除非您要嵌入 SVG 或静态内容，否则您最好使用`<iframe>`. 包括 SVG 使用`<embed>`（如果我没记错的话，`<object>`不会让你编写脚本†）。老实说，我不知道为什么你会使用`<object>`除非用于较旧的浏览器或闪存（我不使用）。

† 正如下面的评论所指出的；中的脚本`<object>`将运行，但父上下文和子上下文无法直接通信。您`<embed>`可以从父级获取子级的上下文，反之亦然。这意味着您可以使用父级中的脚本来操作子级等。这部分是不可能的，`<object>`或者`<iframe>`您必须设置一些其他机制，例如[JavaScript postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)。

使用`object`over的原因之一`iframe`是对象会重新调整嵌入内容的大小以适应对象尺寸。最值得注意的是 iPhone 4s 中的 safari，其中屏幕宽度为`320px`，嵌入 URL 中的 html 可能会设置更大的尺寸。

通过 iframe使用的另一个原因`object`是`object`子资源（当`<object>`执行`HTTP`请求时）被视为根据`passive/display`，`Mixed content`这意味着当您必须拥有 时它更安全`Mixed content`。

混合内容意味着当您拥有`https`但您的资源来自`http`.

参考：[https://developer.mozilla.org/en-US/docs/Web/Security/Mixed\_content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content)

iframe 具有“沙箱”属性，可能会阻止弹出窗口等

Iframeembed 和 object 元素之间有什么区别

在使用 `iframe` 的时候，通常情况下，链接默认会在该 `iframe` 内打开。如果想要强制链接在父窗口中打开，可以通过几种方法实现：

1. **使用 HTML 的 `target` 属性：**
   在 `iframe` 内的链接上设置 `target="_parent"` 属性，可以使该链接在父窗口中打开。这是标准的HTML方法，兼容性良好。

   例如：

   ```html
   <a href="http://www.example.com" target="_parent">Open in Parent Window</a>
   ```

2. **使用 JavaScript：**
   通过编写 JavaScript 代码，可以监听 `iframe` 内部的链接点击事件，并强制它们在父窗口中打开。

   例如：

   ```javascript
   // 假设你有一个ID为"myIframe"的iframe
   var iframe = document.getElementById('myIframe');

   // 下面的代码会为iframe内的所有链接绑定点击事件
   // 当点击时，链接将在父窗口中打开
   iframe.contentWindow.document.body.addEventListener('click', function(e) {
       var target = e.target;
       if(target.tagName === 'A') {
           e.preventDefault();
           parent.location.href = target.href;
       }
   });
   ```

3. **使用 `base` 标签：**
   在 `iframe` 的 `head` 部分中添加一个 `base` 标签，并设置 `target="_parent"` 也能达到相同的效果。

   例如，在 `iframe` 的文档中：

   ```html
   <head>
     <base target="_parent">
   </head>
   ```

   这样，`iframe` 中的所有链接默认都会在父窗口中打开。

以上就是主要的几种方法，你可以根据具体的应用场景和需求来选择最适合的方案。

我发现最好的解决方案是使用**基本**标签。将以下内容添加到 iframe 中页面的头部：

    <base target="_parent">
    

这将加载父窗口中页面上的所有链接。如果您希望链接在新窗口中加载，请使用：

    <base target="_blank">
    

[浏览器支持](https://caniuse.com/mdn-html_elements_base)

使用目标属性：

    <a target="_parent" href="http://url.org">link</a>

使用 JavaScript：

    window.parent.location.href= "http://www.google.com";

**您可以使用任何选项**

**如果只有父页面：**

如果您想打开父页面或父 iframe**的所有链接**，请在 iframe 的 head 部分使用以下代码：

`<base target="_parent" />`

**或者**

如果您想打开父页面或父 iframe 的**特定链接**，请使用以下方式：

    <a target="_parent" href="http://specific.org">specific Link</a>
    <a  href="http://normal.org">Normal Link</a>
    

**或者**

**如果是嵌套 iframe：**

如果想打开浏览器窗口中的**所有链接**（在浏览器 URL 中重定向），则可以在 iframe 的 head 部分使用以下代码：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $("a").click(function(){
                top.window.location.href=$(this).attr("href");
                return true;
            })
        })
    </script>
    

**或者**

如果您想在浏览器窗口中打开**特定链接**（在浏览器 URL 中重定向），则可以使用以下方式：

    <a  href="http://specific.org"   target="_top" >specific Link</a>
    

或者

    <a  href="javascript:top.window.location.href='your_link'">specific Link</a>
    <a  href="javascript:top.window.location.href='http://specific.org'">specific Link</a>
    <a  href="http://normal.org">Normal Link</a>

有一个名为的 HTML 元素[`base`](http://www.w3schools.com/TAGS/tag_base.asp)，它允许您：

> 为页面上的所有链接指定默认 URL 和默认目标：

    <base target="_blank" />
    

通过指定，`_blank`您可以确保_iframe_内的所有链接都将在外部打开。

Iframe 如何强制在父窗口中打开链接？

在使用Chrome开发者工具（DevTools）调试iframe时，主要步骤如下：

1. **打开Chrome DevTools：**
   您可以通过在Chrome浏览器中按 `F12`键，或者点击浏览器右上角的三个点选择“更多工具”然后点击“开发者工具”来打开DevTools。
2. **定位到iframe元素：**
   在Elements面板中，可以通过DOM树状结构寻找到 `<iframe>`标签。如果页面中iframe较多，可能需要一些时间来定位。也可以利用DevTools顶部的元素选择工具（点击左上角的图标或按 `Ctrl + Shift + C`）来快速选中页面上的iframe。
3. **审查iframe内容：**
   选中iframe元素后，右键点击并选择“Show as tab”。这样会在Elements面板中打开一个新的标签页，显示被选中的iframe的DOM结构。在这个新标签页中，您可以像审查常规的HTML元素一样来审查和修改iframe的内容。
4. **使用Console面板与iframe交互：**
   在Console面板中，您可以通过 `frames`数组访问各个iframe的window对象。例如，`frames[0]`代表第一个iframe的window对象。您可以执行JavaScript代码来与iframe内部的脚本交互。
5. **调试JavaScript：**
   如果要调试iframe中的JavaScript代码，您可以在Sources面板中找到iframe的JavaScript文件。在文件中设置断点，然后通过与网页交互或者触发事件来激活断点，之后就可以逐行调试代码。
6. **网络请求分析：**
   在Network面板中查看iframe加载期间的网络请求。您可以过滤显示仅限于iframe的请求，这样就可以分析iframe的资源加载情况、网络延迟等问题。
7. **性能分析：**
   使用Performance面板来分析iframe中网页的加载和运行性能。您可以记录一个性能会话然后分析各种事件，例如JavaScript的执行时间、样式的计算、布局的重排等。
8. **跨域iframe调试：**
   如果iframe内容是从另一个域加载的，可能会因为同源策略受到限制。在这种情况下，如果您有权限，可以在服务器端设置CORS（跨源资源共享）策略来允许调试。否则，您只能调试在同一源（即相同的协议、域名和端口）上加载的iframe。

举个例子，假设您正在开发一个集成了多个第三方服务的仪表盘，每个服务都通过一个独立的iframe来加载。您可能需要调试其中一个服务的登录流程，这时您可以通过上述步骤来打开DevTools，选择相应的iframe标签，然后在Sources面板中设置断点来观察登录过程中触发的函数调用和变量状态。

使用Chrome开发者工具调试iframe时，耐心和细心是非常重要的。确保您有适当的权限和访问控制，特别是在处理跨域iframe时。


在 Chrome 的开发者工具中，顶部有一个栏，称为`Execution Context Selector`(h/t [felipe-sabino](https://stackoverflow.com/users/429521/felipe-sabino) )，位于“元素”选项卡下方，该栏根据当前选项卡的上下文而变化。在“控制台”选项卡中时，该栏中有一个下拉列表，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您将发现自己处于适当的框架上下文中。：D

**铬 v59** ![Chrome 版本 59](https://i.stack.imgur.com/dqpt6.png)

**铬 v33** ![Chrome 版本 33](https://i.stack.imgur.com/nR0Cj.png)

**Chrome v32 及更低版本** ![Chrome 32 之前版本](https://i.stack.imgur.com/945eW.png)

目前，控制台中的评估是在页面主框架的上下文中执行的，并且它遵循与主框架本身相同的跨域策略。这意味着除非主框架可以访问 iframe 中的元素，否则您无法访问。不过，您仍然可以使用“脚本”面板设置断点并调试代码。

**更新：**这不再是真的。请参阅[Metagrapher 的回答](https://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools#8581276)。

当 iFrame 像这样指向您的网站时：

    <html>
      <head>
        <script type="text/javascript" src="/jquery.js"></script>
      </head>
      <body>
        <iframe id="my_frame" src="/wherev"></iframe>
      </body>
    </html>
    

你可以通过这种东西访问iFrame DOM。

    var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
    iframeBody.append($("<h1/>").html("Hello world!"));

在我相当复杂的场景中，关于如何在 Chrome 中执行此操作的公认答案对我来说不起作用。您可能想尝试使用 Firefox 调试器（Firefox 开发人员工具的一部分），它显示所有“源”，包括那些属于 iFrame 的部分

在使用Chrome开发者工具（DevTools）调试iframe时，主要步骤如下：

1. **打开Chrome DevTools：**
   您可以通过在Chrome浏览器中按 `F12`键，或者点击浏览器右上角的三个点选择“更多工具”然后点击“开发者工具”来打开DevTools。
2. **定位到iframe元素：**
   在Elements面板中，可以通过DOM树状结构寻找到 `<iframe>`标签。如果页面中iframe较多，可能需要一些时间来定位。也可以利用DevTools顶部的元素选择工具（点击左上角的图标或按 `Ctrl + Shift + C`）来快速选中页面上的iframe。
3. **审查iframe内容：**
   选中iframe元素后，右键点击并选择“Show as tab”。这样会在Elements面板中打开一个新的标签页，显示被选中的iframe的DOM结构。在这个新标签页中，您可以像审查常规的HTML元素一样来审查和修改iframe的内容。
4. **使用Console面板与iframe交互：**
   在Console面板中，您可以通过 `frames`数组访问各个iframe的window对象。例如，`frames[0]`代表第一个iframe的window对象。您可以执行JavaScript代码来与iframe内部的脚本交互。
5. **调试JavaScript：**
   如果要调试iframe中的JavaScript代码，您可以在Sources面板中找到iframe的JavaScript文件。在文件中设置断点，然后通过与网页交互或者触发事件来激活断点，之后就可以逐行调试代码。
6. **网络请求分析：**
   在Network面板中查看iframe加载期间的网络请求。您可以过滤显示仅限于iframe的请求，这样就可以分析iframe的资源加载情况、网络延迟等问题。
7. **性能分析：**
   使用Performance面板来分析iframe中网页的加载和运行性能。您可以记录一个性能会话然后分析各种事件，例如JavaScript的执行时间、样式的计算、布局的重排等。
8. **跨域iframe调试：**
   如果iframe内容是从另一个域加载的，可能会因为同源策略受到限制。在这种情况下，如果您有权限，可以在服务器端设置CORS（跨源资源共享）策略来允许调试。否则，您只能调试在同一源（即相同的协议、域名和端口）上加载的iframe。

举个例子，假设您正在开发一个集成了多个第三方服务的仪表盘，每个服务都通过一个独立的iframe来加载。您可能需要调试其中一个服务的登录流程，这时您可以通过上述步骤来打开DevTools，选择相应的iframe标签，然后在Sources面板中设置断点来观察登录过程中触发的函数调用和变量状态。

使用Chrome开发者工具调试iframe时，耐心和细心是非常重要的。确保您有适当的权限和访问控制，特别是在处理跨域iframe时。

如何使用 chrome 开发工具调试 iframe

在网页开发过程中，如果需要判断当前的网页是在`iframe`内加载，还是直接在浏览器窗口加载的，我们可以使用JavaScript来做这样的判断。以下是两种常用的方法：

### 1. 使用 `window` 对象的 `self` 和 `top` 属性

JavaScript中的`window`对象有两个特别的属性：`self`和`top`。`window.self`返回当前窗口的引用，而`window.top`返回当前浏览器窗口的最顶层窗口的引用。如果一个网页是直接在浏览器窗口中加载的，那么`window.self`和`window.top`应该是相同的。如果网页在一个`iframe`中加载，那么`window.self`将是`iframe`的窗口对象，而`window.top`将是最顶层（含嵌套的`iframe`）窗口的对象。所以我们可以通过比较这两个属性是否相等来判断：

```javascript
if (window.self === window.top) {
  // 当前网页不在iframe中，直接在浏览器窗口加载
  console.log("网页直接在浏览器窗口中加载。");
} else {
  // 当前网页在iframe中加载
  console.log("网页在iframe内加载。");
}
```

### 2. 使用 `window` 对象的 `parent` 属性

另外一个方法是比较`window.parent`和`window.self`。`window.parent`返回当前窗口的父级窗口对象。如果当前窗口没有父窗口，`parent`属性返回自身（即`window.self`）。我们可以这样判断：

```javascript
if (window.parent === window.self) {
  // 当前网页不在iframe中，直接在浏览器窗口中加载
  console.log("网页直接在浏览器窗口中加载。");
} else {
  // 当前网页在iframe中加载
  console.log("网页在iframe内加载。");
}
```

### 示例应用场景

一个实际的应用场景是网页中的JavaScript脚本需要根据网页是否在`iframe`中加载来调整其行为。例如，如果一个网页在`iframe`中时，可能不希望显示某些元素或者调整布局；或者为了安全考虑，可能不允许在`iframe`中加载某些操作。

通过上述的方法，开发者可以在脚本中加入判断逻辑，然后根据该逻辑来调整页面的展示或功能。

`window.top`注意：由于[同源策略，](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)浏览器可能会阻止访问。IE bug 也会发生。

这是工作代码：

    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }
    

`top`和`self`都是`window`对象（与 一起`parent`），因此您可以查看您的窗口是否是顶部窗口。

当位于与父级同源的 iframe 中时，该方法返回嵌入窗口的[`window.frameElement`](https://devdocs.io/dom/window/frameelement)元素（例如`iframe`或）。`object`否则，如果在顶级上下文中浏览，或者父框架和子框架具有不同的来源，则它将评估为`null`。

    window.frameElement
      ? 'embedded in iframe or object'
      : 'not embedded or cross-origin'
    

这是一个[HTML 标准](https://html.spec.whatwg.org/multipage/browsers.html#dom-frameelement)，所有现代浏览器都提供基本支持。

if ( window !== window.parent ) 
    {
          // The page is in an iframe   
    } 
    else 
    {     
          // The page is not in an iframe   
    }

我不确定此示例如何适用于较旧的 Web 浏览器，但我将其用于 IE、Firefox 和 Chrome，没有出现任何问题：

    var iFrameDetection = (window === window.parent) ? false : true;

RoBorg 是正确的，但我想添加一个旁注。

**在 IE7/IE8 中，当 Microsoft 在浏览器中添加选项卡时，他们破坏了一件事情，如果你不小心的话，会对你的 JS 造成严重破坏。**

想象一下这个页面布局：

    MainPage.html
      IframedPage1.html   (named "foo")
      IframedPage2.html   (named "bar")
        IframedPage3.html (named "baz")
    

现在，在框架“baz”中，您单击一个链接（没有目标，在“baz”框架中加载），它工作正常。

如果加载的页面（我们称其为special.html），使用JS 检查“it”是否有名为“bar”的父框架，它将返回true（预期）。

现在让我们说，special.html 页面在加载时会检查父框架（是否存在及其名称，如果它是“bar”，它会在栏框架中重新加载自身。例如

    if(window.parent && window.parent.name == 'bar'){
      window.parent.location = self.location;
    }
    

到目前为止，一切都很好。现在错误来了。

_可以说，您没有像平常一样单击原始链接并在“baz”框架中加载special.html 页面，而是中键单击它或选择在新选项卡中打开它。_

当新选项卡加载时（**_根本没有父框架！_**）**IE 将进入页面加载的无限循环！**因为 IE“复制”了 JavaScript 中的框架结构，使得新选项卡确实有一个父选项卡，并且该父选项卡的名称为“bar”。

好消息是检查：

    if(self == top){
      //this returns true!
    }
    

在该新选项卡中确实返回 true，因此您可以测试这个奇怪的条件。

当您需要确定网页是在 `iframe` 内加载还是在直接浏览器窗口中加载的，可以通过检查 `window` 对象与 `top` 对象是否相同来判断。`window` 对象代表当前窗口，而 `top` 对象代表顶层窗口。如果一个网页是在 `iframe` 中加载的，那么它的 `window` 对象将与 `top` 对象不同，因为 `top` 将指向包含 `iframe` 的最外层的窗口。相反，如果网页直接在浏览器窗口中加载，`window` 对象将等同于 `top` 对象。

这里有一个简单的JavaScript代码示例，可以用来检测一个网页是否在 `iframe` 中加载：

```javascript
if (window === top) {
  console.log("网页是在直接浏览器窗口中加载的。");
} else {
  console.log("网页是在iframe内加载的。");
}
```

当这段代码运行时，如果网页是直接在浏览器窗口中加载的，`window === top` 将返回 `true`，并打印出相应的信息。如果网页是在 `iframe` 中加载的，条件将返回 `false`，并打印出不同的信息。

举个实际的例子，假设我之前负责的一个项目是开发一个第三方评论组件，客户可以将这个组件嵌入到他们的网页中，通常是通过 `iframe` 来实现。我们需要在组件内判断它是被嵌入到 `iframe` 中还是直接在浏览器中打开，这样我们就可以根据不同的情况调整布局和功能。我们就使用了上述的方法来进行检测，并相应地调整了组件的响应式设计。

如何检测当前网页是在 iframe 中加载还是浏览器直接加载？

Redux 中的 selectors 是用来从 Redux 的状态树（state tree）中抽取并派生数据的函数。在 Redux 应用中，全局状态是以一个单一的对象存储的，由于这个状态树可以非常庞大并包含许多不同的数据片段，直接从中获取数据可能会既复杂又繁琐。Selectors 就是为了简化访问状态树中的数据而存在的。

Selectors 的主要职责和作用有：

1. **封装状态结构**：Selectors 提供了一个抽象层，允许组件不必了解状态树的具体结构即可读取状态。这意味着如果状态树的结构发生了变化，只需更新相应的 selectors，而无需修改所有使用了这部分状态的组件。

2. **计算派生数据**：Selectors 可以用来计算派生数据，即根据状态树中的原始数据来计算新的数据表示。比如，从一个包含多个对象的数组中过滤出符合特定条件的对象，或者计算某些数据的总和。

3. **性能优化**：配合库如 Reselect，selectors 可以通过记忆（memoization）技术避免不必要的计算。这意味着只有当 selector 的输入（即状态树的相关部分）发生变化时，selector 才重新计算，否则它会返回上一次计算的结果，从而提高应用的性能。

4. **重用和组合**：Selectors 可以被重用于不同的组件中，也可以组合在一起构建更复杂的 selectors，这有助于减少代码冗余并保持逻辑的一致性。

### 例子

假设我们有一个 Redux 状态，其中包含一个商品列表，每个商品都有价格和类别。如果我们想要获取所有电子类别商品的总价格，我们可以写一个 selector 来实现这一点：

```javascript
// state结构示例
const state = {
  products: [
    { id: 1, name: '手机', category: '电子', price: 599 },
    { id: 2, name: '平板电脑', category: '电子', price: 799 },
    { id: 3, name: '手表', category: '配饰', price: 199 }
    // 更多商品...
  ]
};

// Selector
const selectElectronicProductsTotalPrice = (state) => {
  return state.products
    .filter(product => product.category === '电子')
    .reduce((total, product) => total + product.price, 0);
};

// 使用Selector
const totalPrice = selectElectronicProductsTotalPrice(state);
console.log(totalPrice); // 输出应为 1398
```

在这个例子中，`selectElectronicProductsTotalPrice` 是一个 selector，它首先过滤出所有电子类别的商品，然后计算并返回这些商品价格的总和。通过这种方式，我们不仅封装了对状态树的查询逻辑，还使得这段逻辑更易于测试和重用。

`getUser`不是一个减速器，它确实是一个选择器，即一个知道如何从存储中提取特定数据块的函数。

_选择器_提供了一个额外的层，这样，如果您更改了商店结构，并且突然您`users`不再位于`state.entities.users`，而是位于`state.users.objects.entities`（或其他什么），那么您只需要更新`getUser`选择器，而不是应用程序中您正在制作的每个位置。参考旧位置。

这使得它们在重构 Redux 存储时特别方便。

选择器是 redux 状态的 getter。与 getters 一样，选择器封装了状态的结构，并且是可重用的。选择器还可以计算派生属性。

您可以编写选择器，例如您在 redux-saga 中看到的选择器。例如：

    const getUsersNumber = ({ users }) => users.length;
    
    const getUsersIds = ({ users }) => users.map(({ id }) => id);
    

ETC...

您还可以使用[reselect](https://github.com/reactjs/reselect)，这是 Redux 的一个简单的“选择器”库，它可以记忆选择器以提高它们的效率。

选择器是将 Redux 状态作为参数并返回一些数据以传递给组件的函数。

    const getUserData = state => state.user.data;
    

为什么要使用它？

1.  主要原因之一是避免 Redux 中出现重复数据。
2.  随着应用程序的增长，数据对象的形状不断变化，因此不要在所有相关组件中进行更改。强烈建议/更容易在一个地方更改数据。
3.  选择器应该靠近减速器，因为它们在相同的状态下运行。数据更容易保持同步。

使用[重新选择](https://www.npmjs.com/package/reselect)有助于记住数据，这意味着当将相同的输入传递给函数时，返回之前的结果而不是再次重新计算。因此，这可以增强应用程序的性能。

Redux 中的 selectors 是干什么的？

`fork` 在 `redux-saga` 是一种非阻塞调用效果，用于创建一个新的 `saga` 分支，该分支可以同时与父 `saga` 运行。使用 `fork` 的场合通常包括以下几点：

1. **并发执行任务**：当你希望启动一个新的任务而不阻塞当前的流程时，可以使用 `fork`。这允许同时执行多个任务。

   **例子**：假设在一个用户登录的流程中，我需要并行地从多个源获取数据，比如用户信息、用户设置以及用户消息。我可以通过 `fork` 来分别启动三个不同的 `saga`，它们将并行执行，而不会互相等待。

    ```javascript
    function* loginFlow() {
      // ... 登录逻辑
      yield fork(fetchUserInfo);
      yield fork(fetchUserSettings);
      yield fork(fetchUserMessages);
      // ... 其他逻辑
    }
    ```

2. **非关键任务**：如果有一些任务是次要的，或者说它的完成与否不会影响当前主流程的继续，可以使用 `fork` 来执行。

   **例子**：在提交表单数据后，我可能想要记录一些统计数据，但是不希望统计代码的失败影响主流程。

    ```javascript
    function* submitFormSaga(data) {
      try {
        yield call(api.submitForm, data); // 主要任务
        yield put({ type: 'FORM_SUBMIT_SUCCESS' });
        yield fork(recordFormSubmitStats, data); // 非关键任务
      } catch (e) {
        yield put({ type: 'FORM_SUBMIT_FAILURE', message: e.message });
      }
    }
    ```

3. **长期运行的监听器**：`fork` 可用于启动一个任务，该任务将长期运行并监听将来可能发生的动作。它作为一个后台任务，在后台持续监听某些动作而不阻塞其他 `saga`。

   **例子**：一个聊天应用可能需要一个 `saga` 来监听接收新消息的动作。

    ```javascript
    function* watchNewMessages() {
      while (true) {
        const action = yield take('RECEIVE_MESSAGE');
        // 处理接收到的消息
      }
    }

    function* mainSaga() {
      // ...
      yield fork(watchNewMessages);
      // ...
    }
    ```

在使用 `fork` 时，需要注意的是，`fork` 创建的任务是不会阻塞父 `saga` 的继续执行。如果你需要确保任务完成后再继续，应该使用 `call` 效果。此外，`fork` 创建的任务在出错时不会传播错误到父 `saga`，这意味着如果不处理，可能会导致在后台默默地失败。因此，启动 `fork` 任务时通常需要在任务中进行适当的错误处理。

一般来说，`fork`当传奇需要启动非阻塞任务时，这是有用的。这里的非阻塞是指：调用者启动任务并继续执行，而不等待它完成。

在多种情况下，此功能都非常有用，但主要有两种：

*   按逻辑域对 sagas 进行分组
*   保留对任务的引用以便能够取消/加入它

您的顶级传奇可以是第一个用例的示例。你可能会遇到类似的情况：

    yield fork(authSaga);
    yield fork(myDomainSpecificSaga);
    // you could use here something like yield [];
    // but it wouldn't make any difference here
    

其中`authSaga`可能包括以下内容：

    yield takeEvery(USER_REQUESTED_LOGIN, authenticateUser);
    yield takeEvery(USER_REQUESTED_LOGOUT, logoutUser);
    

您可以看到这个示例与您所建议的等效，即使用`fork`saga 进行调用并产生`takeEvery`调用。但实际上，您只需出于代码组织目的而执行此操作。`takeEvery`本身就是一个分叉任务，因此在大多数情况下，这将是无用的冗余。

第二个用例的示例如下：

    yield take(USER_WAS_AUTHENTICATED);
    const task = yield fork(monitorUserProfileUpdates);
    yield take(USER_SIGNED_OUT);
    yield cancel(task);
    

您可以在这个示例中看到，将`monitorUserProfileUpdates`在调用者传奇恢复时执行，并等待`USER_SIGNED_OUT`要分派的操作。它还可以保留对其的引用，以便在需要时取消它。

为了完整起见，还有另一种方式来启动非阻塞调用：`spawn`。`fork`不同之`spawn`处在于错误和取消从子传奇到父传奇的方式。

通常`fork`对于某些具有多次 API 调用分派的情况变得更有用，原因是您可以通过实例化任务中的取消来拒绝这些获取，例如`cancel(task1);`

如果最终用户强制退出应用程序，或者其中一项任务失败，导致您的指令、策略和逻辑出现问题，并且取消或终止 saga 上的当前处理任务可能是合理的，则非常有用；

有**2种方法**可以取消任务

[来自redux-saga](https://redux-saga.js.org/docs/advanced/NonBlockingCalls/#first-try) **非阻塞**效应取消文档的基础

    import { take, put, call, fork, cancel } from 'redux-saga/effects'
    
    // ...
    
    function* loginFlow() {
      while (true) {
        const {user, password} = yield take('LOGIN_REQUEST')
        // Non-Blocking Effect which is the fork
        const task = yield fork(authorize, user, password)
        const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
        if (action.type === 'LOGOUT'){
          //cancel the task
          yield cancel(task)
          yield call(Api.clearItem, 'token')
        }
      }
    }
    

或者

    
    import {call, put, fork, delay} from 'redux-saga/effects';
    import someAction from 'action/someAction';
    
    function* fetchAll() {
      yield fork(fetcher, 'users');
      yield fork(fetcher, 'posts');
      yield fork(fetcher, 'comments');
      yield delay(1500);
    }
    
    function* fetcher(endpoint) {
      const res = yield call(fetchAPI, endpoint);
      if (!res.status) {
        throw new Error(`Error: ${res.error}`);
      }
      yield put(someAction({payload: res.payload}));
    }
    
    function* worker() {
      try {
        yield call(fetchAll);
      } catch (err) {
        // handle fetchAll errors
      }
    }
    
    function* watcher() {
      yield takeEvery(BLOGS.PUSH, worker);
    }
    

别客气 ：）

Redux saga 中何时使用 fork ？

React Query 和 Redux 是两个用于在React应用程序中管理状态的库，但它们的关注点和使用场景有一些显著的区别。

1. **设计目的**:
   - **React Query** 是专门为处理异步数据（服务器状态）而设计的，比如从API检索数据、缓存数据以及数据同步。
   - **Redux** 是一个更通用的状态管理库，它为JavaScript应用提供了一个可预测的状态容器，可以用来管理应用的客户端状态（UI状态）。

2. **数据缓存和失效**:
   - **React Query** 内建了数据缓存和自动失效的机制。它能够自动地在后台重新获取数据，以及在数据变得过时时标记它们。
   - **Redux** 本身并不直接提供这些功能。要在Redux中实现数据缓存和失效，通常需要额外的中间件或手动实现相应的逻辑。

3. **数据同步和更新**:
   - **React Query** 提供了一套内置的工具来处理数据的查询、突变（mutations）、更新和同步，这样在使用时只需要少量的样板代码。
   - **Redux** 需要手动管理数据同步和更新，通常涉及到编写action、reducer以及使用中间件来处理异步逻辑，这可能会导致较多的样板代码。

4. **配置和样板代码**:
   - **React Query** 的使用通常更简洁，它提供了hooks，如`useQuery`和`useMutation`，这些API可以让你直接在组件中发起数据请求。
   - **Redux** 的配置和使用相对复杂，特别是在项目初始搭建时。你需要定义actions、reducers、创建store等，虽然Redux Toolkit可以帮助减少一些样板代码。

5. **开发哲学**:
   - **React Query** 倾向于提供一种简化的方式来处理服务器状态，它鼓励你直接从组件内部加载数据，而不需要将所有的数据都放到全局状态管理中。
   - **Redux** 遵循Functional Programming的原则，通过使用纯函数（reducers）和不可变数据来管理和更新状态，这样可以更容易地跟踪状态的变化和进行时间旅行调试。

6. **社区和生态**:
   - **React Query** 在异步数据管理方面很受欢迎，但是它的生态相较于Redux来说较小，因为它比较专注于数据获取和缓存。
   - **Redux** 有一个庞大的社区和生态系统，包括许多中间件和附加库，如redux-thunk, redux-saga, reselect, redux-form等。

### 例子:
假设你的应用需要从一个REST API获取用户列表，并且你希望显示的数据是最新的。使用**React Query**，你可以这样做：

```jsx
import { useQuery } from 'react-query';

function UsersComponent() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  // Render your UI based on the data, error, and loading state...
}
```

在这个例子中，`fetchUsers`是一个异步函数，它向API请求数据。`useQuery`会自动处理数据的加载、缓存、重载和更新。

而在**Redux**中，你可能需要创建actions和reducers来处理异步请求，并使用例如`redux-thunk`的中间件来处理异步逻辑：

```jsx
import { useDispatch, useSelector } from 'react-redux';

function UsersComponent() {
  const dispatch = useDispatch();
  const { users, error, isLoading } = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  // Render your UI based on the users, error, and loading state...
React Query 和 Redux 是两种不同类型的库，它们在React应用程序中承担着不同的角色。

**React Query** 是一个用于数据获取、缓存、同步和更新的库。它专注于处理异步数据操作，如从API检索数据、缓存结果以及自动重新获取数据。以下是React Query的一些关键特点：

- **自动缓存和无效化**：React Query自动缓存每次请求的结果，并在数据变化时提供重新获取数据的机制。
- **后台同步**：支持在数据变化或用户与应用程序互动时，自动在后台更新数据。
- **查询状态**: React Query 提供了丰富的状态信息，包括加载状态、错误状态、数据状态等，方便在UI中展示。
- **最小的全局状态管理**：React Query的目标是用最小的配置管理服务器状态。

**Redux** 是一个为JavaScript应用程序提供可预测状态容器的库，特别适合在React中使用。它主要用于管理和维护应用程序的全局状态，并提供一种模式来更新和访问这个状态。以下是Redux的一些关键特点：

- **全局状态管理**：Redux提供单一的全局状态树，所有状态的变化都通过派发行为(action)和归约器(reducers)的方式来管理。
- **可预测性**：因为所有的状态变化都遵循一个明确的流程，所以应用程序的行为是可预测的。
- **中间件**：Redux 支持使用中间件来扩展其功能，比如异步调用、日志记录等。
- **开发工具**：Redux拥有强大的开发工具，如Redux DevTools，可以帮助开发者追踪状态的变化和行为的派发。

**主要区别**：

1. **用途**：React Query主要用于数据同步，而Redux用于全局状态管理。
2. **数据管理**：React Query内置了数据获取和缓存的机制，而Redux需要开发者手动管理数据请求和响应结果。
3. **状态同步**：React Query提供自动的数据同步机制，Redux则需要结合额外的库（如redux-thunk或redux-saga）来处理异步逻辑。
4. **配置**：React Query减少了配置和样板代码的需要，Redux则需要更多的样板代码和配置步骤。
5. **开发体验**：React Query 的API设计更贴近React的hooks模式，而Redux通常需要遵循特定的设计模式和最佳实践。

例如，如果我们有一个用户列表，并且我们想通过React Query来获取这些用户，我们可能会这样做：

```javascript
import { useQuery } from 'react-query';

function Users() {
  const { isLoading, error, data } = useQuery('fetchUsers', fetchUsersApi);

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

async function fetchUsersApi() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}
```

使用Redux处理相同的数据获取，我们需要编写action creators、reducers以及相应的async action handlers：

```javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Action types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';

// Action creators
const fetchUsersRequest = () => ({ type: FETCH_USERS_REQUEST });
const fetchUsersSuccess = users => ({ type: FETCH_USERS_SUCCESS, payload:

React-query 就是所谓的专用库。它为你保存了一个 api 缓存——没有别的。由于它是专门的，因此它可以很好地完成这项工作并且需要更少的代码。

另一方面，Redux 为您提供了几乎可以存储任何内容的工具 - 但您必须编写逻辑。因此，您可以在 Redux 中做更多事情，但您可能必须编写专用库不需要的代码。

您可以并行使用它们：react 查询中的 api 缓存，Redux 中的其余全局状态。

也就是说，官方 Redux Toolkit 从 1.6 版开始还附带了 api 缓存抽象[RTK Query](https://redux-toolkit.js.org/rtk-query/overview)，其功能集与 React Query 类似，但总体概念有所不同 - 您可能还想检查一下。

`react-query`旨在**处理存储在远程服务器上的数据**。要访问此数据，您的应用程序需要使用异步请求。您可能需要在这里处理缓存、加载状态、网络故障等问题。

这就是react-query 的闪光点。

`Redux`另一端**处理客户端的数据**。例如，文本输入的内容或模态的状态。您不需要处理与网络相关的问题。但您确实需要处理复杂的因果序列。

这就是 redux 的闪光点

`Redux`这`react-query`是两个非常不同的东西：`react-query`用于数据同步，`Redux`是全局状态管理器。`react-query`用于将所有应用程序保持同步到同一个数据库，`Redux`用于将应用程序状态的一部分共享给需要读取该状态的所有组件。

举个例子：我有一个可以与其他用户聊天的应用程序。我使`react-query`所有应用程序与用户收到的所有消息保持同步，然后将消息存储在其中，`Redux`以便在聊天页面和历史聊天页面上显示消息。

React Query 管理服务器状态。它的主要功能是处理Server和Client之间的功能。

Redux 处理客户端状态。Redux 可用于异步存储数据。

因此，它们在不同层面上都有其独特的作用，并且可以同时使用。

我们应该区分两种状态，**客户端状态**和**服务器（或远程）状态**：

*   客户端状态包含：
    *   本地创建的尚未持久化到服务器的数据。
    *   处理活动路由、选定选项卡、微调器、分页控件等的 UI 状态。
*   服务器状态是与以下内容相关的所有内容：
    *   数据远程保存，需要异步 API 来获取和更新

当涉及到客户端状态时，**Redux**是一个用于管理应用程序状态的出色管理工具。

另一方面，为了管理服务器状态，我们可以使用常规状态管理工具，但它们不太擅长处理异步或服务器状态。因此，为了解决这个问题，我们使用**React Query**。正如他们的文档中所述，**React 查询**是一个很棒的工具：

*   缓存...（可能是编程中最难做的事情）
*   将同一数据的多个请求合并为单个请求
*   在后台更新“过时”数据
*   了解数据何时“过时”
*   尽快反映数据更新
*   性能优化，例如分页和延迟加载数据
*   管理服务器状态的内存和垃圾收集
*   通过结构共享来记忆查询结果

React Query 和 Redux 是两个用于在React应用程序中管理状态的库，但它们的关注点和使用场景有一些显著的区别。

1. **设计目的**:
   - **React Query** 是专门为处理异步数据（服务器状态）而设计的，比如从API检索数据、缓存数据以及数据同步。
   - **Redux** 是一个更通用的状态管理库，它为JavaScript应用提供了一个可预测的状态容器，可以用来管理应用的客户端状态（UI状态）。

2. **数据缓存和失效**:
   - **React Query** 内建了数据缓存和自动失效的机制。它能够自动地在后台重新获取数据，以及在数据变得过时时标记它们。
   - **Redux** 本身并不直接提供这些功能。要在Redux中实现数据缓存和失效，通常需要额外的中间件或手动实现相应的逻辑。

3. **数据同步和更新**:
   - **React Query** 提供了一套内置的工具来处理数据的查询、突变（mutations）、更新和同步，这样在使用时只需要少量的样板代码。
   - **Redux** 需要手动管理数据同步和更新，通常涉及到编写action、reducer以及使用中间件来处理异步逻辑，这可能会导致较多的样板代码。

4. **配置和样板代码**:
   - **React Query** 的使用通常更简洁，它提供了hooks，如`useQuery`和`useMutation`，这些API可以让你直接在组件中发起数据请求。
   - **Redux** 的配置和使用相对复杂，特别是在项目初始搭建时。你需要定义actions、reducers、创建store等，虽然Redux Toolkit可以帮助减少一些样板代码。

5. **开发哲学**:
   - **React Query** 倾向于提供一种简化的方式来处理服务器状态，它鼓励你直接从组件内部加载数据，而不需要将所有的数据都放到全局状态管理中。
   - **Redux** 遵循Functional Programming的原则，通过使用纯函数（reducers）和不可变数据来管理和更新状态，这样可以更容易地跟踪状态的变化和进行时间旅行调试。

6. **社区和生态**:
   - **React Query** 在异步数据管理方面很受欢迎，但是它的生态相较于Redux来说较小，因为它比较专注于数据获取和缓存。
   - **Redux** 有一个庞大的社区和生态系统，包括许多中间件和附加库，如redux-thunk, redux-saga, reselect, redux-form等。

### 例子:
假设你的应用需要从一个REST API获取用户列表，并且你希望显示的数据是最新的。使用**React Query**，你可以这样做：

```jsx
import { useQuery } from 'react-query';

function UsersComponent() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  // Render your UI based on the data, error, and loading state...
}
```

在这个例子中，`fetchUsers`是一个异步函数，它向API请求数据。`useQuery`会自动处理数据的加载、缓存、重载和更新。

而在**Redux**中，你可能需要创建actions和reducers来处理异步请求，并使用例如`redux-thunk`的中间件来处理异步逻辑：

```jsx
import { useDispatch, useSelector } from 'react-redux';

function UsersComponent() {
  const dispatch = useDispatch();
  const { users, error, isLoading } = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  // Render your UI based on the users, error, and loading state...

React Query 和 Redux 是两种不同类型的库，它们在React应用程序中承担着不同的角色。

**React Query** 是一个用于数据获取、缓存、同步和更新的库。它专注于处理异步数据操作，如从API检索数据、缓存结果以及自动重新获取数据。以下是React Query的一些关键特点：

- **自动缓存和无效化**：React Query自动缓存每次请求的结果，并在数据变化时提供重新获取数据的机制。
- **后台同步**：支持在数据变化或用户与应用程序互动时，自动在后台更新数据。
- **查询状态**: React Query 提供了丰富的状态信息，包括加载状态、错误状态、数据状态等，方便在UI中展示。
- **最小的全局状态管理**：React Query的目标是用最小的配置管理服务器状态。

**Redux** 是一个为JavaScript应用程序提供可预测状态容器的库，特别适合在React中使用。它主要用于管理和维护应用程序的全局状态，并提供一种模式来更新和访问这个状态。以下是Redux的一些关键特点：

- **全局状态管理**：Redux提供单一的全局状态树，所有状态的变化都通过派发行为(action)和归约器(reducers)的方式来管理。
- **可预测性**：因为所有的状态变化都遵循一个明确的流程，所以应用程序的行为是可预测的。
- **中间件**：Redux 支持使用中间件来扩展其功能，比如异步调用、日志记录等。
- **开发工具**：Redux拥有强大的开发工具，如Redux DevTools，可以帮助开发者追踪状态的变化和行为的派发。

**主要区别**：

1. **用途**：React Query主要用于数据同步，而Redux用于全局状态管理。
2. **数据管理**：React Query内置了数据获取和缓存的机制，而Redux需要开发者手动管理数据请求和响应结果。
3. **状态同步**：React Query提供自动的数据同步机制，Redux则需要结合额外的库（如redux-thunk或redux-saga）来处理异步逻辑。
4. **配置**：React Query减少了配置和样板代码的需要，Redux则需要更多的样板代码和配置步骤。
5. **开发体验**：React Query 的API设计更贴近React的hooks模式，而Redux通常需要遵循特定的设计模式和最佳实践。

例如，如果我们有一个用户列表，并且我们想通过React Query来获取这些用户，我们可能会这样做：

```javascript
import { useQuery } from 'react-query';

function Users() {
  const { isLoading, error, data } = useQuery('fetchUsers', fetchUsersApi);

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

async function fetchUsersApi() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}
```

使用Redux处理相同的数据获取，我们需要编写action creators、reducers以及相应的async action handlers：

```javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Action types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';

// Action creators
const fetchUsersRequest = () => ({ type: FETCH_USERS_REQUEST });
const fetchUsersSuccess = users => ({ type: FETCH_USERS_SUCCESS, payload:

React Query和 Redux 之间的主要区别是什么？

当您想要同时分发多个 actions 时，Redux 本身并不提供直接的方法来同时分发它们，因为每个 `dispatch` 调用通常只处理一个 action。但是，有几种模式可以实现相似的效果：

### 1. 连续 Dispatch
最简单的方法就是连续调用几次 `dispatch`，每个调用分发一个 action。

```javascript
dispatch(actionCreator1());
dispatch(actionCreator2());
dispatch(actionCreator3());
```

这种方法的缺点是它可能会导致多次重新渲染，如果每个 action 都会改变 Redux 状态的话。

### 2. 批量 Dispatch（中间件）
您可以使用中间件来扩展 Redux 的功能，比如 `redux-batch`，它允许您将多个 actions 打包成单个批量 action，然后由中间件展开并逐一分发。

```javascript
import { batchDispatchMiddleware } from 'redux-batch';

// 应用中间件
const store = createStore(
  reducer,
  applyMiddleware(batchDispatchMiddleware)
);

// 分发批量 actions
store.dispatch(batchActions([actionCreator1(), actionCreator2(), actionCreator3()]));
```

这种方法可以减少不必要的重新渲染，因为状态更新是在所有 actions 都被处理后才发生的。

### 3. Promise 中 Dispatch
如果您的 actions 是异步的，您可以在一个 Promise 中链式调用它们，使用 `Promise.all` 或者 `async/await`。但是这只适用于异步 actions，并且它们仍然是逐个处理的，并不是真正的同时。

```javascript
Promise.all([
  dispatch(asyncActionCreator1()),
  dispatch(asyncActionCreator2()),
  dispatch(asyncActionCreator3()),
]);
```

或者使用 `async/await`：

```javascript
async function dispatchMultipleActions() {
  await dispatch(asyncActionCreator1());
  await dispatch(asyncActionCreator2());
  await dispatch(asyncActionCreator3());
}
```

### 4. 自定义 Action Creators
您可以创建一个 action creator，它返回一个函数（thunk）而不是一个 action 对象。这个函数可以分发多个 actions。

```javascript
const compositeAction = () => (dispatch, getState) => {
  dispatch(actionCreator1());
  dispatch(actionCreator2());
  dispatch(actionCreator3());
};

// 然后使用
dispatch(compositeAction());
```

这种方法通常是与 `redux-thunk` 中间件一起使用的。

---

在实际应用中，连续分发是最简单和最直接的方法，但如果你想要避免多次渲染，则批量分发或者封装 actions 的方法会比较有效。重要的是要评估你的应用性能需求和状态更新的复杂性，选择最适合你情况的方案。

根据[文档](https://redux.js.org/advanced/asyncactions#async-action-creators)推荐的方法是在操作创建者中，如下所示：

    function actionCreator(payload) {
        return dispatch => {
            dispatch(action1(payload))
            dispatch(action2(payload))
        }
    }
    

[然后，您可能希望将操作创建者作为 prop 附加，并使用此处](https://github.com/reduxjs/react-redux/blob/master/docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md)`mapDispatchToProps`提到的示例将其传递到容器。所以它看起来像这样：[](https://github.com/reduxjs/react-redux/blob/master/docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md)

    const mapDispatchToProps = dispatch => ({
       action1: some_payload => dispatch(action1(some_payload))
       action2: some_payload => dispatch(action2(some_payload))
    })
    
    // your component
    export default connect(mapStateToProps, mapDispatchToProps)(YourApp)
    

* * *

正如其他人指出的那样，`The action creator`这是调度多个操作的正确位置。

下面的示例`action1`说明了如何在您的`action creator`.

    const action1 = id => {
      return dispatch => {
        dispatch(action2(id))
        dispatch(action3(id))
      }
    }

动作创建者是分派多个动作的正确位置。尽管像下面这样的代码可以工作：

    function actionCreator(payload) {
        return dispatch => {
            dispatch(action1(payload))
            dispatch(action2(payload))
        }
    }
    

我强烈建议`redux-thunk`基于操作的创建者始终返回已解决的 Promise，以便此类操作创建者可以成为另一个异步调用的一部分。因此，对上述内容最简单的更新是：

    function actionCreator(payload) {
        return dispatch => {
            dispatch(action1(payload));
            dispatch(action2(payload));
            return Promise.resolve();
        }
    }
    

`actionCreator(payload).then(doAnotherAction(anotherPayload))` 如果我们需要维护调用顺序， 则可以使用以下内容分派到上面： 或以下内容：`actionCreator(payload).then(() => doAnotherAction(anotherPayload))`

如果您希望您的动作创建器“面向未来”，以便它可以处理调用异步和同步动作创建器，您可以将其编写为：

    function actionCreator(payload) {
        return dispatch =>
            Promise.resolve(dispatch(action1(payload))).then(
            () => dispatch(action2(payload)));
    }
    

而且，如果你喜欢 ES6 箭头表示法，上面的可以定义为：

    const actionCreator = payload => dispatch =>
            Promise.resolve(dispatch(action1(payload))).then(
            () => dispatch(action2(payload)));

如果您有[Promise Middleware](https://github.com/klis87/redux-saga-requests#promise-middleware-arrow_up)，您可以使用此语法，这样您就可以`.then()`在您的`dispatch(topLevelAction())`：

    export const topLevelAction = () => dispatch => {
        return Promise.all([dispatch(action1()), dispatch(action2()), dispatch(action3())])
    }

虽然@GibboK 的解决方案对我不起作用：

    const mapDispatchToProps = (dispatch) => ({
      action2: id => dispatch(Actions.action2(id)),
      action3: id => dispatch(Actions.action3(id)),
      action1: (dateId, attrId) => {
        return dispatch => {
          dispatch(Actions.action2(dateId));
          dispatch(Actions.action3(attrId));
        }
      }
    });
    

我最终选择了[redux-batched-actions](https://github.com/tshelburne/redux-batched-actions)。像魅力一样工作：

    const mapDispatchToProps = (dispatch) => ({
      action2: id => dispatch(Actions.action2(id)),
      action3: id => dispatch(Actions.action3(id)),
      action1: (dateId, attrId) =>
        dispatch(batchActions([
          Actions.action2(dateId),
          Actions.action3(attrId)
        ]))
    });

Redux 如何同时 dispatch 多个 actions ?

在 Redux 中，您可以使用 `applyMiddleware` 函数来添加多个中间件。`applyMiddleware` 是 Redux 的一个内置函数，它允许您将中间件链接到 Redux 的 dispatch 方法上。当您创建 Redux store 的时候，可以通过这种方式来增强 store 的功能。

下面是如何使用 `applyMiddleware` 来添加多个中间件的一个基本例子，假设我们有两个中间件 `middleware1` 和 `middleware2`：

```javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

// 创建中间件实例
const middleware1 = thunk;
const middleware2 = logger;

// 使用`applyMiddleware`函数结合多个中间件
const store = createStore(
  rootReducer,
  applyMiddleware(middleware1, middleware2)
);

export default store;
```

在这个例子中，中间件 `thunk` 用于支持异步 action creator，而 `logger` 用于在每次 action 被派发时在控制台中打印日志信息。这两个中间件通过 `applyMiddleware` 函数按照顺序被添加到 store 中。Redux 会按照提供给 `applyMiddleware` 的顺序来调用这些中间件，因此在上面的代码中，`thunk` 中间件会先于 `logger` 中间件处理 actions。

值得注意的是，中间件的执行顺序很重要，因为某些中间件可能依赖于前面中间件的处理结果。因此，在添加多个中间件时，应当考虑它们之间的依赖关系及执行顺序。

[applyMiddleware](http://redux.js.org/docs/api/applyMiddleware.html)将每个中间件作为新参数（而不是数组）。因此，只需传入您想要的每个中间件即可。

    const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

安迪的回答很好，但是，考虑到你的中间件不断增长，下面的代码会更好：

    const middlewares = [ReduxThunk, logger]
    applyMiddleware(...middlewares)

`applyMiddleware`应作为第二个参数传递给 createStore。`applyMiddleware`可以有多个中间件作为参数。

    const store = createStore(reducers, applyMiddleware(ReduxThunk, logger));
    
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.querySelector('#app')
    );

**这是应用一个或多个中间件的方法：**

    import {createStore, applyMiddleware} from 'redux';
    import thunk from 'redux-thunk';
    import logger from 'redux-logger';
    import {rootReducer} from "../reducers"; // Import your combined reducers ;)
    
    const middleWares = [thunk, logger]; // Put the list of third part plugins in an array 
    
    // Create the store with the applied middleWares and export it
    export const store = createStore(rootReducer, applyMiddleware(...middleWares));
    

**现在导入最近在 index.js 中导出的存储并将其传递给 Provider 组件。您的 index.js 文件应如下所示：**

……

    import {Provider} from 'react-redux';
    import {store} from './store';
    
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>, 
    document.getElementById('root'));
    

就这样 ！

您可以简单地以逗号分隔的方式传递中间件，如下代码所示：

`const store = createStore(reducer, applyMiddleware(thunk, logger));`

注意：请导入顶部的 applyMiddlware、thunk 和 logger。

Redux 如何添加多个中间件?

`compose` 函数在 Redux 中的主要作用是实现从右到左的函数组合。在 Redux 的上下文中，它通常用于中间件、增强器（enhancers）或者将多个函数组合成一个函数的场景。

函数组合是一种在函数式编程中常见的概念，它允许你把多个函数组合成一个单一的函数。组合后的函数将从右到左执行各个单独的函数，这意味着最右边的函数的输出将成为右边邻近函数的输入，以此类推，直到最左边的函数。

`compose` 函数的签名大概如下所示：

```javascript
compose(...functions)
```

每个 `function` 都是将接收一个值然后返回一个值的函数。当你调用 `compose` 生成的函数时，你给它传递的参数将会被最右边的函数接收，并且每个函数的输出都将成为下一个函数的输入。

例如，如果你有这样几个函数：

```javascript
function print(input) {
  console.log(input);
  return input;
}

function multiplyBy5(input) {
  return input * 5;
}

function subtract2(input) {
  return input - 2;
}
```

如果你想要创建一个新函数，这个新函数能够先执行 `subtract2`，然后执行 `multiplyBy5`，最后执行 `print`，你可以使用 `compose`：

```javascript
const composedFunction = compose(print, multiplyBy5, subtract2);
```

当你调用 `composedFunction(10)` 时，将会按照以下的顺序执行操作：

1. `subtract2(10)` 会先执行，返回 `8`。
2. `multiplyBy5(8)` 会拿到 `8` 并返回 `40`。
3. `print(40)` 拿到 `40` 并将其打印出来。

在 Redux 中，`compose` 函数常常用于中间件的组合。例如，在配置 Redux store 时，你可能需要将多个中间件和 Redux DevTools 扩展组合起来，以增强 `createStore`。这通常是通过 `compose` 函数来完成的。

```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  composeEnhancers(
    applyMiddleware(thunk)
    // 可以在这里添加更多的中间件
  )
);
```

在这个场景中，`composeEnhancers` 利用了 Redux DevTools 扩展的能力，并且与 `applyMiddleware` 结合，将 `thunk` 中间件应用到了 store 的创建过程中。这样，你就能够在开发过程中更方便地调试异步操作以及其他可能会修改状态的操作。

**提高可读性和便利性是使用 compose 的主要优点。**

当您想要将多个存储增强器传递到存储时，可以使用_Compose 。_存储增强器是高阶函数，可为存储添加一些额外的功能。默认情况下，Redux 提供的唯一存储增强器是_applyMiddleware_，但是还有许多其他可用的增强器。

**存储增强器是高阶函数**

什么是高阶函数？摘自[Haskell 文档](http://learnyouahaskell.com/higher-order-functions)：

> 高阶函数可以将函数作为参数并返回函数作为返回值。执行其中任一操作的函数称为高阶函数

来自 Redux 文档：

> compose 所做的只是让您编写深度嵌套的函数转换，而不会导致代码向右漂移。不要给予它太多的信任！

因此，当我们链接高阶函数（存储增强器）而不必编写时

    func1(func2(func3(func4))))
    

我们可以写

    compose(func1, func2, func3, func4)
    

这两行代码做同样的事情。只是语法不同。

**终极版示例**

从[Redux 文档](https://paulkogel.gitbooks.io/redux-docs/content/docs/api/compose.html)来看，如果我们不使用_compose，_我们就会有

    finalCreateStore =
        applyMiddleware(middleware)(
          require('redux-devtools').devTools()(
            require('redux-devtools').persistState(
              window.location.href.match(/[?&]debug_session=([^&]+)\b/)
            )()
          )
        )(createStore);
    

而如果我们使用_compose_

    finalCreateStore = compose(
        applyMiddleware(...middleware),
        require('redux-devtools').devTools(),
        require('redux-devtools').persistState(
          window.location.href.match(/[?&]debug_session=([^&]+)\b/)
        )
      )(createStore);
    

要了解有关 Redux 撰写功能的更多信息，[请单击此处](https://paulkogel.gitbooks.io/redux-docs/content/docs/api/compose.html)

检查原始[`compose`源代码](https://github.com/reduxjs/redux/blob/39cc043c55a770503bab3daf6026da5340923632/src/compose.js)也可能很有用，因为它在纯 JavaScript 中只有 10 个 loc。

Redux 中的 compose 函数的作用是什么？

**Redux**:
Redux 是一个独立的状态管理库，它可以与任何JavaScript应用一起使用。Redux的核心思想是维护一个单一的全局状态对象，这个状态对象是不可变的。当我们想要改变状态时，我们会派发（dispatch）一个行为（action），这是一个描述发生了什么的普通对象。然后这个action被送到reducer函数，reducer函数决定如何根据action的类型及其数据来改变状态。

例如，在一个计数器应用中，你可能有一个action `{ type: 'INCREMENT' }`，和一个reducer，当遇到这个action时，它会将状态中的计数值加一。

**React-Redux**:
React-Redux 是Redux的官方React绑定，它使得我们可以容易地将Redux和React应用程序连接起来。它提供了 `<Provider>`组件，使得Redux store能够被整个应用访问，以及 `connect()`函数，可以将React组件连接到Redux store。在新的React Redux版本中，`connect()`函数的功能也可以通过 `useSelector`和 `useDispatch`这样的React hooks来实现。

举一个例子，假设你有一个展示计数器值的React组件，你可以使用 `useSelector` hook来获取当前的计数值，并使用 `useDispatch`来派发INCREMENT或DECREMENT这样的actions。

**Redux-Thunk**:
Redux-Thunk 是Redux的一个中间件，它允许我们在action创建函数中执行异步操作。传统的action创建函数返回一个action对象，但是使用redux-thunk后，我们可以返回一个函数，这个函数接收 `dispatch`和 `getState`作为参数。这使得在action创建函数中可以进行异步API调用，并且在数据到达时派发普通的同步action。

比如，如果你有一个异步操作，需要从服务器加载一些数据，你可能会有一个thunk action创建函数，它在开始加载时派发一个 `{ type: 'LOADING_DATA' }`的action，在数据加载成功后派发 `{ type: 'DATA_LOADED', payload: data }`，并且在出现错误时派发 `{ type: 'LOADING_ERROR', error: error }`。 

总的来说，Redux是构建状态管理系统的基础，React-Redux是将Redux集成到React应用中的工具，而Redux-Thunk则是扩展Redux以处理异步操作的中间件。三者合作可以创建一个既可以处理同步也可以处理异步逻辑的强大的React应用状态管理系统。

> 1.  有人可以清楚地解释 redux 中控制流是如何发生的吗？

Redux（始终）有一个存储。

1.  每当您想要替换商店中的状态时，您都可以调度一个操作。
    
2.  该动作由一个或多个减速器捕获。
    
3.  减速器创建一个新状态，该状态结合了旧状态和分派的操作。
    
4.  商店订阅者会收到有新状态的通知。
    

> 2.  组件/容器/动作/动作创建者/存储在 redux 中的作用是什么？

*   Store - 保存状态，当新操作到达时，运行调度 -> 中间件 -> 缩减器管道，并在状态被新状态替换时通知订阅者。
    
*   组件 - 不直接了解状态的哑视图部分。也称为演示组件。
    
*   容器 - 使用react-redux 感知状态的视图片段。也称为智能组件、高阶组件
    

* * *

请注意，容器/智能组件与哑组件只是构建应用程序的好方法。

* * *

*   操作 - 与 Flux 相同 - 具有类型和有效负载的命令模式。
    
*   动作创建者 - 创建动作的 DRY 方式（不是绝对必要的）
    

> 3.  redux/react-redux/redux-thunk/任何其他之间的区别？

*   [redux](https://github.com/reactjs/redux) - 像通量一样的流，具有单个商店，可以在您喜欢的任何环境中使用，包括 vanilla js、react、Angular 1/2 等...
    
*   [React-Redux](https://github.com/reactjs/react-redux) - Redux 和 React 之间的绑定。该库提供了一组[反应钩子](https://react-redux.js.org/api/hooks)\- `useSelector()`，`useStore()`从存储中获取数据，并`useDispatch()`调度操作。您还可以使用该[`connect()`](https://react-redux.js.org/api/connect)函数创建 HoC（高阶组件），它监听存储的状态更改，为包装的组件准备 props，并在状态更改时重新渲染包装的组件。
    
*   [redux-thunk](https://github.com/gaearon/redux-thunk) - 中间件，允许您编写返回函数而不是操作的操作创建器。thunk 可用于延迟操作的分派，或仅在满足特定条件时分派。主要用于对 api 的异步调用，在成功/失败时调度另一个操作。
    

> 4.  如果您可以发布任何简单而精确的 redux 教程的链接，那将非常有帮助。

*   [Redux 官方文档](https://redux.js.org/introduction/getting-started)
    
*   [Redux 入门](https://egghead.io/courses/getting-started-with-redux)
    
*   [使用惯用的 Redux 构建 React 应用程序](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)
    
*   [展示组件和容器组件](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ntt3yarhm)

回答你的标题问题：

> redux、react-redux、redux-thunk 之间有什么区别？

1.  redux：主库（独立于React）
2.  redux-thunk：一个 redux 中间件，可以帮助您执行异步操作
3.  react-redux：将你的 redux 存储与 ReactComponents 连接起来

*   redux：用于管理应用程序状态的库。
*   react-redux：用于管理**React**应用程序（redux）状态的库。
*   redux-thunk：一个用于日志记录、崩溃报告、与异步 API 对话、路由等的中间件...

React Redux 和 Redux Thunk 之间有什么区别？

React 的 `setState` 函数并不保证立即更新组件的状态，这是因为 React 采用了一种名为批处理更新（batched updates）的性能优化策略。当您调用 `setState` 时，React 实际上将这个状态更改排入一个队列中，并非立即执行状态更新。这样做的目的是为了减少不必要的DOM操作和重渲染，从而提高应用程序的性能。

这里有几个关键点解释为什么 `setState` 不立即更新：

1. **异步更新**：`setState` 实际上是一个异步操作。React 会收集多次状态更改，然后一次性进行批量更新，这通常发生在浏览器的每一帧渲染结束之前。

2. **组件生命周期**：React 的设计理念是在组件的生命周期中的特定点上统一进行状态更新和渲染。如果每次调用 `setState` 都会立即触发重渲染，那么在处理复杂组件时会产生性能问题。

3. **避免不必要的渲染**：假设您在一个事件处理函数中连续调用了多次 `setState`。如果每次调用都立即更新，那么浏览器可能会进行多余的渲染操作，这显然是不高效的。通过批量更新，React 可以合并这些状态更改，并只进行一次渲染。

4. **并发模式**：在 React 的未来版本中（如 React 18 引入的并发模式），React 更加智能地调度更新，以便更好地利用浏览器的渲染能力，提供流畅的用户体验。

举个例子，假设在一个组件的事件处理函数中，你连续调用了三次 `setState`，每次都改变了组件状态中的一个值：

```javascript
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });
```

在上述代码中，你可能期望 `value` 的值会增加三次。但由于 React 的批处理和异步更新，这三次调用可能会合并成一次更新，`value` 只增加一次。

了解 `setState` 是异步的，对于编写正确的 React 代码非常重要。如果你需要在状态更新后立即执行某些操作，应该使用 `setState` 的回调函数，或者使用生命周期方法，比如 `componentDidUpdate`。

```javascript
this.setState({ value: this.state.value + 1 }, () => {
  console.log('状态更新完成，新的值为:', this.state.value);
});
```

在这个例子中，打印状态的操作会在状态更新且组件重新渲染后执行。

您应该调用第二个函数作为 setState 的回调，因为 setState 是异步发生的。就像是：

    this.setState({pencil:!this.state.pencil}, myFunction)
    

然而，在您的情况下，由于您希望使用参数调用该函数，因此您必须更具创意，并且也许创建自己的函数来调用道具中的函数：

    myFunction = () => {
      this.props.updateItem(this.state)
    }
    

将它们结合在一起应该可以工作。

`setState()`由于各种原因（主要是性能），React 中的调用是异步的。在幕后，React 会将多个调用批处理`setState()`为一个状态突变，然后重新渲染一次组件，而不是为每个状态更改都重新渲染。

幸运的是，解决方案相当简单 -`setState`接受回调参数：

    checkPencil: () => {
       this.setState(previousState => ({
          pencil: !previousState.pencil,
       }), () => {
          this.props.updateItem(this.state);
       });
    }

关于 Ben Hare 的回答，如果有人想使用 React Hooks 实现相同的目标，我在下面添加了示例代码。

    import React, { useState, useEffect } from "react"
    
    let [myArr, setMyArr] = useState([1, 2, 3, 4]) // the state on update of which we want to call some function
    
    const someAction = () => {
      let arr = [...myArr]
      arr.push(5) // perform State update
      setMyArr(arr) // set new state
    }
    
    useEffect(() => { // this hook will get called every time myArr has changed
       // perform some action every time myArr is updated
       console.log('Updated State', myArr)
    }, [myArr])

当您使用当前状态的属性更新状态时，React 文档建议您使用函数调用版本而`setState`不是对象。

所以`setState((state, props) => {...})`代替`setState(object)`.

原因是这`setState`更多的是要求国家改变而不是立即改变。React 会批量处理这些`setState`提高性能的请求。

这意味着您正在检查的国有财产可能不稳定。这是一个需要注意的潜在陷阱。

有关更多信息，请参阅此处的文档： https: [//facebook.github.io/react/docs/react-component.html#setstate](https://facebook.github.io/react/docs/react-component.html#setstate)

* * *

为了回答你的问题，我会这样做。

    checkPencil(){
        this.setState((prevState) => {
            return {
                pencil: !prevState.pencil
            };
        }, () => {
            this.props.updateItem(this.state)
        });
    }

这是因为它是**异步**发生的，所以意味着那时可能还没有更新......

根据 React v.16 文档，您需要使用第二种形式来`setState()`接受函数而不是对象：

> ### 状态更新可能是异步的
> 
> React 可以将多个 setState() 调用批处理为单个更新以提高性能。
> 
> 由于 this.props 和 this.state 可能会异步更新，因此您不应依赖它们的值来计算下一个状态。
> 
> 例如，以下代码可能无法更新计数器：

    // Wrong
    this.setState({
      counter: this.state.counter + this.props.increment,
    });
    

> 要修复此问题，请使用 setState() 的第二种形式，它接受函数而不是对象。该函数将接收先前的状态作为第一个参数，并将应用更新时的 props 作为第二个参数：

    // Correct
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment
    }));

为什么 React Setstate 没有立即更新？

Redux-thunk 和 redux-promise 都是用于在 Redux 状态管理库中处理异步操作的中间件，但它们在处理异步动作时的方式存在差异。以下是它们各自的特点和区别：

### Redux-thunk

**特点**:
- Redux-thunk 是一个中间件，允许我们在 action creators 里面创建返回函数而不是返回 action 对象的能力。
- 这个返回的函数接收 `dispatch` 和 `getState` 作为参数，可以执行异步操作，并且在操作完成后手动调用 `dispatch`。
- Thunk 是一个允许我们写更多复杂异步逻辑的工具，包括序列化的异步调用、延迟异步调用等。

**例子**:
```javascript
// Action creator 返回一个函数（thunk）
export const fetchData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    return fetch('/my-api-endpoint')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', error }));
  };
};
```

在上面的例子中，`fetchData` 函数不是返回一个 action 对象，而是返回一个函数。这个函数可以执行异步请求并在请求完成后通过 `dispatch` 发送一个新的 action。

### Redux-promise

**特点**:
- Redux-promise 是另一种 Redux 异步中间件，它专注于处理返回 promise 对象的 action。
- 当一个 action creator 返回一个 promise 时，redux-promise 中间件会等待这个 promise 解决，并且自动发送一个带有解决值的 action 或者在 promise 被拒绝时发送一个带有错误信息的 action。

**例子**:
```javascript
// Action creator 返回一个携带 promise 的 action 对象
export function fetchData() {
  return {
    type: 'FETCH_DATA',
    payload: fetch('/my-api-endpoint').then(response => response.json())
  };
};
```

在这个例子中，`fetchData` 函数返回一个包含 `type` 和 `payload` 的 action 对象。 `payload` 是一个 promise，由 redux-promise 自动处理。

### 区别

1. **返回值**: 
   - Redux-thunk 允许 action creators 返回函数（thunk），这些函数可以执行任何异步逻辑并调用 `dispatch`。
   - Redux-promise 要求 action creators 返回一个 promise 作为 `payload` 的 action 对象。

2. **复杂异步流程控制**:
   - Redux-thunk 可以实现更复杂的异步流程控制，如条件分支、延迟异步调用、连续异步调用等。
   - Redux-promise 对异步控制的支持较为简单，主要是针对单一的异步操作。

3. **易用性**:
   - Redux-thunk 提供的灵活性更高，但是需要开发者手动处理 dispatch。
   - Redux-promise 使用起来更简单，只需返回 promise 即可，但它的灵活性不如 thunk。

综上所述，redux-thunk 提供了对异步操作更精细和复杂控制的能力，而 redux-promise 则提供了一种简洁的处理异步请求的方式，适用于更简单的场景。开发者可以根据实际项目需求选择最合适的工具。

`redux-thunk`允许您的动作创建者返回一个函数：

    function myAction(payload){
        return function(dispatch){
            // use dispatch as you please
        }
    }
    

`redux-promise`允许他们返回一个承诺：

    function myAction(payload){
        return new Promise(function(resolve, reject){
            resolve(someData); // redux-promise will dispatch someData
        });
    }
    

如果您需要异步或有条件地分派操作，这两个库都很有用。`redux-thunk`还允许您在一个动作创建器中多次调度。无论您选择其中之一、另一个还是两者都完全取决于您的需求/风格。

您可能希望/需要在您的应用程序中同时使用两者。**从 redux-promise 开始用于常规的 Promise 生成异步任务，然后随着复杂性的增加而扩展以添加 Thunk（或 Sagas 等）**：

*   当生活很简单时，您只需与返回单个承诺的创建者进行基本的异步工作，然后`redux-promise`将改善您的生活并简化它，快速而轻松。（简而言之，当你的 Promise 解决时，你不需要考虑“拆开”它们，然后编写/发送结果，redux-promise(-middleware) 会为你处理所有那些无聊的事情。）
*   但是，当出现以下情况时，生活会变得更加复杂：
*   也许你的动作创建者想要产生几个承诺，你想将它们作为单独的动作分派到单独的减速器？
*   或者，在决定如何以及在何处分派结果之前，您需要管理一些复杂的预处理和条件逻辑？

在这些情况下，**它的好处`redux-thunk`是它允许您将复杂性封装在 action-creator 中**。

但请注意，_如果您的 Thunk 生成并分派 Promise，那么您将需要同时使用这两个库_：

*   Thunk 将编写原始操作并分派它们
*   `redux-promise`然后将在减速器处处理由 Thunk 生成的各个 Promise 的解包，以避免产生样板文件。（你_可以_用 Thunks 做所有事情，`promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)`但为什么要这么做呢？）

* * *

总结用例差异的另一种简单方法：**Redux 操作周期的开始与结束**：

*   Thunk 用于Redux 流程的_开始_：如果您需要创建一个复杂的操作，或者封装一些粗糙的操作创建逻辑，将其排除在组件之外，并且绝对排除在减速器之外。
*   `redux-promise`是在流程_结束时_，一旦所有内容都归结为简单的承诺，并且您只想打开它们并将其已解决/拒绝的值存储在商店中

* * *

注释/参考文献：

*   我发现`redux-promise-middleware`这是对原始想法的更完整和更容易理解的实现`redux-promise`。它正在积极开发中，并且也得到了很好的补充`redux-promise-reducer`。
*   还有其他类似的中间件可用于组合/排序复杂的操作：一种非常流行的中间件是`redux-saga`，它与 非常相似`redux-thunk`，但基于生成器函数的语法。同样，您可能会将它与 结合使用`redux-promise`，因为 sagas Produce 承诺您不希望使用大量样板手动打开和处理...
*   这是一篇[很棒的文章，](https://medium.com/react-native-training/redux-4-ways-95a130da0cdc#.plivi8f61)直接比较了各种异步组合选项，包括 thunk 和 redux-promise-middleware。（TL;DR：_“与其他一些选项相比，Redux Promise 中间件极大地减少了样板代码”_ …… _“我想我喜欢 Saga 来处理更复杂的应用程序_（阅读：“使用”），_而 Redux Promise 中间件则适合其他一切。”_）
*   请注意，有一个重要的情况，您可能认为需要分派多个操作，但实际上不需要，并且您可以使简单的事情变得简单。这就是您只希望多个减速器对单个异步调用做出反应的地方，并且您倾向于向这些多个减速器分派多个操作。但是，_多个减速器完全没有理由不能监视单个操作类型。_您只想确保您的团队知道您正在使用该约定，因此他们不会假设只有一个减速器（具有相关名称）可以处理给定的操作。

全面披露：我对 Redux 开发相对较新，并且自己也为这个问题而苦苦挣扎。我将解释我找到的最简洁的答案：

当调度操作时，ReduxPromise 返回一个 Promise 作为有效负载，然后 ReduxPromise 中间件解析该 Promise 并将结果传递给减速器。

另一方面，ReduxThunk 强制操作创建者推迟实际将操作对象分派给减速器，直到调用分派为止。

这是我找到此信息的教程的链接： https: [//blog.tighten.co/react-101-part-4-firebase](https://blog.tighten.co/react-101-part-4-firebase)。

所有问题