在Koa中使用Koa Router处理路由时，您可以通过`ctx.query`或`ctx.querystring`对象访问查询字符串参数。`ctx`是Koa的上下文对象，它封装了请求和响应对象。

下面是如何获取查询字符串参数的步骤和示例：

### 步骤 1: 引入Koa及Koa Router
首先，您需要安装并引入Koa以及Koa Router模块。

```javascript
const Koa = require('koa');
const Router = require('@koa/router');

const app = new Koa();
const router = new Router();
```

### 步骤 2: 使用路由中间件处理查询参数
然后，创建一个路由并在回调函数中访问查询参数。

```javascript
router.get('/some-path', (ctx) => {
  // 获取查询参数
  const queryParams = ctx.query;
  
  // 对查询参数做一些处理
  // ...

  ctx.body = {
    message: '查看查询参数',
    queryParams
  };
});

// 应用路由中间件
app.use(router.routes()).use(router.allowedMethods());
```

在以上示例中，当有请求发送到`/some-path`时，我们通过`ctx.query`获取了查询参数，这是一个对象，其中包含了请求中的所有查询字符串参数。如果请求的URL是`/some-path?name=John&age=30`，那么`ctx.query`将是`{ name: 'John', age: '30' }`。

### 步骤 3: 启动Koa应用

```javascript
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
```

### 示例

如果你收到一个GET请求，URL是这样的：`http://localhost:3000/some-path?user=alice&token=123`，你可以这样获取这些参数：

```javascript
router.get('/some-path', (ctx) => {
  const user = ctx.query.user;  // alice
  const token = ctx.query.token; // 123
  
  // ... 根据业务逻辑处理这些参数
  
  ctx.body = {
    message: '获取到的用户信息',
    user,
    token
  };
});
```

这样，你就可以根据业务需求处理这些参数了，比如验证token的有效性，查找用户信息等。

总结一下，通过Koa Router获取查询字符串参数是直接通过上下文对象`ctx`的`query`属性来实现的，它为您提供了一个包含所有查询参数的对象，非常直观和方便。

According to the docs there should be a `ctx.request.query` that is the query string items represented as an object.

You can use `ctx.query` (or long-hand `ctx.request.query`)

`app.use( (ctx) => console.log(ctx.query) )`

How to get query string params in koa router?

`cherry-pick` 是 Git 版本控制系统中的一个功能，它的作用是允许用户选择一个或多个其他分支上的提交（commits），并将这些提交复制到当前分支上。这样做的主要原因通常是因为这些提交包含了对特定问题的修复或者是某个特定功能的实现，而这些是当前分支所需要的。

使用 `cherry-pick` 的情况通常包括：

1. **修复紧急问题**：当在一个分支上发现了一个紧急问题并且此问题已经在另一个分支上被解决了，可以使用 `cherry-pick` 将这个修复迅速应用到当前分支上，而不必合并整个分支的所有更改。

2. **代码回滚**：在某些情况下，如果一次提交导致了问题，而这个问题在后续的提交中得到了解决，可以使用 `cherry-pick` 来选择性地将修复的提交应用到当前分支上。

3. **功能挑选**：在开发过程中，可能某个功能先在一个分支上实现，但是需要将其应用到另一个分支上。如果这两个分支不方便直接合并，可以使用 `cherry-pick` 来单独挑选该功能的提交。

4. **代码整理**：有时在多个分支上可能有很多临时或实验性的提交，当需要清理历史或重新组织提交时，可以使用 `cherry-pick` 来选择性地将有效的提交整合到一个新的分支上。

使用 `cherry-pick` 的命令格式如下：

```bash
git cherry-pick <commit-hash>
```

其中 `<commit-hash>` 是想要复制的提交的哈希值。

这里有一个具体的例子：假设我们有两个分支，`main` 和 `feature`。在 `feature` 分支上有一个提交（假设哈希值是 `abc1234`），这个提交修复了一个严重的 bug。现在，我们希望将这个修复迅速应用到 `main` 分支上，但我们不想合并整个 `feature` 分支的所有更改。我们可以在 `main` 分支上执行以下命令：

```bash
git checkout main
git cherry-pick abc1234
```

这样，`abc1234` 这个提交就被复制到了 `main` 分支上，而 `main` 分支上的其他代码保持不变。这是一个高效且精确地管理代码更改的方式。然而，需要注意的是，如果在不同分支之间 `cherry-pick` 被复制的提交，可能会遇到冲突，这时就需要手动解决这些冲突。

Cherry-picking in Git means choosing a commit from one branch and applying it to another.

This contrasts with other ways such as `merge` and `rebase` which normally apply many commits to another branch.

It's also possible to [cherry-pick multiple commits](https://stackoverflow.com/questions/1670970/how-to-cherry-pick-multiple-commits) but `merge` is the preferred way over cherry-picking.

1.  Make sure you are on the branch you want to apply the commit to.
    
        git switch master
        
    
2.  Execute the following:
    
        git cherry-pick <commit-hash>
        
    

N.B.:

1.  If you cherry-pick from a public branch, you should consider using
    
        git cherry-pick -x <commit-hash>
        
    
    This will generate a standardized commit message. This way, you (and your co-workers) can still keep track of the origin of the commit and may avoid merge conflicts in the future.
    
2.  If you have notes attached to the commit they do not follow the cherry-pick. To bring them over as well, You have to use:
    
        git notes copy <from> <to>
        
    

Additional links:

*   [git official guide page](http://git-scm.com/docs/git-cherry-pick)
*   [git cherry-pick guide](https://acompiler.com/git-cherry-pick/)

This quote is taken from: [Version Control with Git](https://rads.stackoverflow.com/amzn/click/com/1449316387)

> Using git cherry-pick The command git cherry-pick commit applies the changes introduced by the named commit on the current branch. It will introduce a new, distinct commit. **Strictly speaking, using git cherry-pick doesn’t alter the existing history within a repository; instead, it adds to the history. As with other Git operations that introduce changes via the process of applying a diff, you may need to resolve conflicts to fully apply the changes from the given commit** . The command git cherry-pick is typically used to introduce particular commits from one branch within a repository onto a different branch. A common use is to forward- or back-port commits from a maintenance branch to a development branch.

    $ git checkout rel_2.3
    $ git cherry-pick dev~2 # commit F, below
    

before: ![before](https://i.stack.imgur.com/R4nfN.png)

after: ![after](https://i.stack.imgur.com/23fCh.png)

Also, here is a very nice in action video tutorial about it: [Youtube: Introduction to Git cherry-pick](https://www.youtube.com/watch?v=-ndmel-4wsk)

Cherry picking in Git is designed to apply some commit from one branch into another branch. It can be done if you eg. made a mistake and committed a change into wrong branch, but do not want to merge the whole branch. You can just eg. revert the commit and cherry-pick it on another branch.

To use it, you just need `git cherry-pick hash`, where `hash` is a commit hash from other branch.

For full procedure see: [http://technosophos.com/2009/12/04/git-cherry-picking-move-small-code-patches-across-branches.html](http://technosophos.com/2009/12/04/git-cherry-picking-move-small-code-patches-across-branches.html)

I prepared step-by-step illustrations what _cherry-pick_ does — and an _animation of these illustrations_ (near the end).

1.  Before cherry-picking  
    (we are going to do a _cherry-pick_ of the commit `L` from the branch `feature`): [![An image showing the state of a Git repository before cherry-picking. On the master branch, there are five commits, A through E. A second branch, labeled 'feature', contains four commits and diverges at commit B. The 'feature' commits are labeled K through N, with L in the middle.](https://i.stack.imgur.com/x1R6o.jpg)](https://i.stack.imgur.com/x1R6o.jpg)

* * *

2.  Starting the command `git cherry-pick feature~2`  
    (`feature~2` is the 2nd commit before  
    `feature`, i.e. the commit `L`): [![This image shows the result of a cherry-pick operation taking the L commit out of the feature branch, and placing it after the E commit on the master branch.](https://i.stack.imgur.com/H1NDD.jpg)](https://i.stack.imgur.com/H1NDD.jpg)

* * *

3.  After performing the command (`git cherry-pick feature~2`): [![The master branch now contains a commit, called L', or L-prime. The feature branch is unchanged.](https://i.stack.imgur.com/LpDH8.jpg)](https://i.stack.imgur.com/LpDH8.jpg)

* * *

The same animated: [![An animation of the above steps.](https://i.stack.imgur.com/j2D9C.gif)](https://i.stack.imgur.com/j2D9C.gif)

* * *

_Note:_

The commit `L'` is _from the user's point of view (commit = snapshot)_ the exact copy of the commit `L`.

Technically (internally), it's a _new, different_ commit (because e.g. `L` contains a pointer to `K` (as its parent), while `L'` contains a pointer to `E`).

**Short example of situation, when you need cherry pick**

> Consider following scenario. You have two branches.
> 
> a) **release1** - This branch is going to your customer, but there are still some bugs to be fixed.
> 
> b) **master** - Classic master branch, where you can for example add functionality for release2.

**NOW**: You fix something in **release1**. Of course you need this fix also in **master**. And that is a typical use-case for cherry picking. So cherry pick in this scenario means that you take a commit from **release1** branch and include it into the **master** branch.

What does cherry picking a commit with git mean

在 React 或 JavaScript 的上下文中，这三个点被称作扩展运算符（spread operator）。扩展运算符有几种不同的用途：

1. **复制对象或数组**：
   扩展运算符可以用来创建对象或数组的浅拷贝。比如，如果我们有一个数组 `arr = [1, 2, 3]`，使用扩展运算符可以创建一个新的数组 `newArr = [...arr]`，这里 `newArr` 将是 `arr` 的一个拷贝，但是是一个新的实例。

   示例代码如下：
   ```javascript
   const originalArray = [1, 2, 3];
   const newArray = [...originalArray]; // newArray: [1, 2, 3]
   ```

2. **合并对象或数组**：
   扩展运算符可以用来合并两个或多个对象（或数组）。这在 React 的状态管理中特别有用，因为经常需要创建新的状态对象，而不是修改现有的状态。

   示例代码如下：
   ```javascript
   const obj1 = { a: 1, b: 2 };
   const obj2 = { b: 3, c: 4 };
   const mergedObject = { ...obj1, ...obj2 }; // mergedObject: { a: 1, b: 3, c: 4 }
   ```

   可以看到，如果有重复的键，后面的对象会覆盖前面的。

3. **函数参数展开**：
   当一个函数期望收到多个参数，而不是一个数组时，扩展运算符可以用来将一个数组'展开'为单独的参数。

   示例代码如下：
   ```javascript
   function sum(a, b, c) {
     return a + b + c;
   }
   const numbers = [1, 2, 3];
   const result = sum(...numbers); // 等同于 sum(1, 2, 3)
   ```

在 React 组件中，扩展运算符经常用来传递 `props`。例如，如果你有一个 `props` 对象，你想将它传递给子组件，你可以使用扩展运算符来传递整个 `props` 对象。

示例代码如下：
```javascript
const MyComponent = (props) => {
  return <ChildComponent {...props} />;
};
```

通过上述方法，`ChildComponent` 将接收到 `MyComponent` 中所有的 `props`，而无需逐一列出它们。这使得组件间的 `props` 传递更加灵活和简洁。

That's [_property spread notation_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes)" even though you could do it elsewhere, too, not just attributes).

`{...this.props}` _spreads out_ the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then

    <Modal {...this.props} title='Modal heading' animation={false}>
    

would be the same as

    <Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
    

But it's dynamic, so whatever "own" properties are in `props` are included.

Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:

Show code snippet

    class Example extends React.Component {
      render() {
        const { className, children } = this.props;
        return (
          <div className={className}>
          {children}
          </div>
        );
      }
    }
    ReactDOM.render(
      [
        <Example className="first">
          <span>Child in first</span>
        </Example>,
        <Example className="second" children={<span>Child in second</span>} />
      ],
      document.getElementById("root")
    );

    .first {
      color: green;
    }
    .second {
      color: blue;
    }

    <div id="root"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Run code snippetHide results

Expand snippet

Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:

    this.setState(prevState => {
        return {foo: {...prevState.foo, a: "updated"}};
    });
    

That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:

Show code snippet

    const obj = {
      foo: {
        a: 1,
        b: 2,
        c: 3
      }
    };
    console.log("original", obj.foo);
    // Creates a NEW object and assigns it to `obj.foo`
    obj.foo = {...obj.foo, a: "updated"};
    console.log("updated", obj.foo);

    .as-console-wrapper {
      max-height: 100% !important;
    }

Run code snippetHide results

Expand snippet

`...` are called **spread attributes** which, as the name represents, it allows an expression to be expanded.

    var parts = ['two', 'three'];
    var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
    

And in this case (I'm going to simplify it).

    // Just assume we have an object like this:
    var person= {
        name: 'Alex',
        age: 35 
    }
    

This:

    <Modal {...person} title='Modal heading' animation={false} />
    

is equal to

    <Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
    

So in short, it's a **neat** short-cut, _we can say_.

The three dots represent the **spread operator** in [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015). It allows us to do quite a few things in JavaScript:

1.  **Concatenate arrays**
    
         var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
         var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
         var games = [...shooterGames, ...racingGames];
        
         console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
        
    
2.  **Destructuring an array**
    
           var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
           var [first, ...remaining] = shooterGames;
           console.log(first); //Call of Duty
           console.log(remaining); //['Far Cry', 'Resident Evil']
        
    
3.  **Combining two objects**
    
         var myCrush = {
           firstname: 'Selena',
           middlename: 'Marie'
         };
        
         var lastname = 'my last name';
        
         var myWife = {
           ...myCrush,
           lastname
         }
        
         console.log(myWife); // {firstname: 'Selena',
                              //   middlename: 'Marie',
                              //   lastname: 'my last name'}
        
    

There's another use for the three dots which is known as **Rest Parameters** and it makes it possible to take all of the arguments to a function in as one array.

4.  **Function arguments as array**
    
          function fun1(...params) {
        
          }

`...` (three dots in JavaScript) is called the Spread Syntax or Spread Operator. This allows an iterable such as an **array** expression or **string** to be expanded or an **object** expression to be expanded wherever placed. This is not specific to React. It is a JavaScript operator.

All these answers here are helpful, but I want to list down the mostly used practical Use Cases of the [Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (Spread Operator).

**1\. Combine Arrays (Concatenate Arrays)**

There are a [variety of ways to combine arrays](https://davidwalsh.name/combining-js-arrays), but the spread operator allows you to place this at any place in an array. If you'd like to combine two arrays and place elements at any point within the array, you can do as follows:

    var arr1 = ['two', 'three'];
    var arr2 = ['one', ...arr1, 'four', 'five'];
    
    // arr2 = ["one", "two", "three", "four", "five"]
    

**2\. Copying Arrays**

When we wanted a copy of an array, we used to have the [`Array.prototype.slice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) method. But, you can do the same with the spread operator.

    var arr = [1,2,3];
    var arr2 = [...arr];
    // arr2 = [1,2,3]
    

**3\. Calling Functions without Apply**

In ES5, to pass an array of two numbers to the `doStuff()` function, you often use the [`Function.prototype.apply()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) method as follows:

    function doStuff (x, y, z) {}
    var args = [0, 1, 2];
    
    // Call the function, passing args
    doStuff.apply(null, args);
    

However, by using the spread operator, you can pass an array into the function.

    doStuff(...args);
    

**4\. Destructuring Arrays**

You can use destructuring and the rest operator together to extract the information into variables as you'd like them:

    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // { a: 3, b: 4 }
    

**5\. Function Arguments as Rest Parameters**

ES6 also has three dots (`...`) which indicates a rest parameter that collects all remaining arguments of a function into an array.

    function f(a, b, ...args) {
      console.log(args);
    }
    
    f(1, 2, 3, 4, 5); // [3, 4, 5]
    

**6\. Using Math Functions**

Any function where spread is used as the argument can be used by functions that can accept any number of arguments.

    let numbers = [9, 4, 7, 1];
    Math.min(...numbers); // 1
    

**7\. Combining Two Objects**

You can use the spread operator to combine two objects. This is an easy and cleaner way to do it.

    var carType = {
      model: 'Toyota',
      yom: '1995'
    };
    
    var carFuel = 'Petrol';
    
    var carData = {
      ...carType,
      carFuel
    }
    
    console.log(carData);
    // {
    //  model: 'Toyota',
    //  yom: '1995',
    //  carFuel = 'Petrol'
    // }
    

**8\. Separate a String into Separate Characters**

You can use the spread operator to spread a string into separate characters.

    let chars = ['A', ...'BC', 'D'];
    console.log(chars); // ["A", "B", "C", "D"]
    

You can think of more ways to use the Spread Operator. What I have listed here are the popular use cases of it.

The three dots in JavaScript are the **spread / rest operator**.

**Spread operator**

The [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) allows an expression to be expanded in places where multiple arguments are expected.

    myFunction(...iterableObj);
    
    [...iterableObj, 4, 5, 6]
    
    [...Array(10)]
    

**Rest parameters**

The [rest](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters) parameter syntax is used for functions with a variable number of arguments.

    function(a, b, ...theArgs) {
      // ...
    }
    

The spread / rest operator for arrays was introduced in [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015). There's a State 2 [proposal](https://github.com/sebmarkbage/ecmascript-rest-spread) for object spread / rest properties.

TypeScript also supports the spread syntax and can transpile that into older versions of ECMAScript with minor [issues](https://github.com/Microsoft/TypeScript/issues/8856).

What are these three dots in React doing?

在 Next.js 中，您通常会处理图片和文本上传到服务器的情况。通常，您会使用一个表单来收集用户输入的文本和图片，然后发送一个 HTTP 请求（通常是 POST 请求）到您的 API 路径。

以下是一个示例流程，说明如何同时上传图片和文本：

1. **创建一个带有文件输入和文本输入的表单**：用户可以在表单中填写文本信息并选择图片文件。

2. **使用 `FormData` API 为上传创建数据**：在客户端，您可以使用 `FormData` API 来构建表单数据对象。这允许您将文本和文件数据组合在一起。

3. **发送带有图片和文本的请求**：使用 `fetch` 或任何其他 HTTP 客户端从客户端发送带有表单数据的 POST 请求到服务器。

4. **服务器端接收处理**：在服务器端，您需要有一个 API 路径来接收这个请求。在 Next.js 中，您可以在 `pages/api` 目录中创建一个 API 路由处理这个请求。

5. **存储文件和文本**：在服务器端，您可以使用像 `multer` 这样的中间件来处理图片文件的上传，并将文本数据存储在数据库中。

下面是一个基本的代码示例，说明了如何在 Next.js 应用程序中进行操作。

#### 前端代码 (React 组件)

```jsx
import React, { useState } from 'react';

function UploadForm() {
    const [file, setFile] = useState(null);
    const [text, setText] = useState('');

    const handleFileChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleTextChange = (e) => {
        setText(e.target.value);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        // 创建 FormData 对象
        const formData = new FormData();
        formData.append('image', file);
        formData.append('text', text);

        // 发送请求到 /api/upload API 路径
        const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData,
        });

        // ...处理响应...
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={text} onChange={handleTextChange} />
            <input type="file" onChange={handleFileChange} />
            <button type="submit">Upload</button>
        </form>
    );
}

export default UploadForm;
```

#### 后端代码 (Next.js API 路径 `/pages/api/upload.js`)

```javascript
import nextConnect from 'next-connect';
import multer from 'multer';

const upload = multer({ dest: 'uploads/' }); // 配置 multer，定义文件存储位置

const apiRoute = nextConnect({
    // 处理任何其他 HTTP 方法
    onNoMatch(req, res) {
        res.status(405).json({ error: `Method ${req.method} Not Allowed` });
    },
});

// 处理单个文件上传，文件字段名为 'image'
apiRoute.use(upload.single('image'));

apiRoute.post((req, res) => {
    const { text } = req.body; // 这是上传的文本数据
    const { file } = req; // 这是上传的文件信息

    // 处理文本和文件存储...

    res.status(200).json({ message: 'File uploaded successfully' });
});

export default apiRoute;
```

这个简单的例子展示了如何在 Next.js 应用中处理同时上传图片和文本的情况。前端使用 `FormData` 收集用户输入，而后端使用 `next-connect` 和 `multer` 中间件来处理 `multipart/form-data` 类型的请求。您可能还需要进一步处理存储逻辑，例如将文件保存到云存储服务，或者将文本数据存储到数据库中。

Your current frontend code attempts to send form data as JSON, which is not suitable for file uploads. Instead, you should use `FormData` to handle both files and text. Here is how you can modify your `handleSubmit`:

    async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        
        // Initialize FormData
        const formData = new FormData(e.currentTarget); // Assuming 'e.currentTarget' is your form
        // Append additional data if necessary
        // formData.append('key', 'value');
    
        const res = await fetch("/api/articles", {
          method: "POST",
          body: formData, // Send formData directly without JSON.stringify
          // Remove 'content-type': 'application/json' header since it's not JSON anymore
        });
    
        if (!res.ok) {
          throw new Error("failed to create ticket.");
        }
    
        router.refresh();
        router.push("/");
    }
    

`POST` function parameters are incorrect. Next.js API routes should take `req` (the request object) and `res` (the response object) as parameters. Reading form data on the server side in Next.js should use `next-connect` or a similar middleware because Next.js does not natively parse `FormData` on the server side.

Install `next-connect` and `formidable`:

    npm install next-connect formidable
    

Modify your API route to correctly handle `FormData`:

    import nextConnect from 'next-connect';
    import { promises as fs } from 'fs';
    import path from 'path';
    import formidable from 'formidable';
    import Post from '@/app/(model)/post';
    
    const apiRoute = nextConnect({
      onError(error, req, res) {
        res.status(501).json({ error: `Sorry something Happened! ${error.message}` });
      },
      onNoMatch(req, res) {
        res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
      },
    });
    
    apiRoute.post(async (req, res) => {
      const form = new formidable.IncomingForm();
      form.uploadDir = "./public/uploads";
      form.keepExtensions = true;
      form.parse(req, async (err, fields, files) => {
        if (err) {
          res.status(500).json({ error: 'Something went wrong during the file upload' });
          return;
        }
        // Process the file, save to your desired location
        const file = files.file; // This depends on the 'name' attribute in your form
        const postData = fields; // Your text fields
        // Move or use the file as needed
        const newPath = path.join(form.uploadDir, file.originalFilename);
        await fs.rename(file.filepath, newPath);
        // Save your postData into the database
        await Post.create(postData);
        res.status(201).json({ message: 'Post created successfully' });
      });
    });
    
    export const config = {
      api: {
        bodyParser: false, // Disabling bodyParser is important here
      },
    };
    
    export default apiRoute;

How do i upload an image and some texts in nextjs typescript

在JavaScript中，要在客户端使用`file-type`来检测文件类型，首先需要引入`file-type`这个库。这个库可以帮助我们读取文件的二进制数据，并分析这些数据来确定文件的实际类型。以下是如何使用`file-type`库检测文件类型的步骤：

1. 安装`file-type`库。如果你在使用的是现代前端项目，可能会使用npm或yarn来安装。可以运行以下命令来安装它：

```bash
npm install file-type
# 或者
yarn add file-type
```

2. 引入`file-type`模块。在你的JavaScript模块中，你可以使用import导入file-type。

```javascript
import fileType from 'file-type';
```

3. 读取文件。在浏览器中，通常我们可以通过`<input type="file">`来让用户选择文件，然后使用`FileReader` API读取这个文件的二进制数据。

4. 使用`file-type`库来检测文件类型。`file-type`接受一个`Buffer`或`Uint8Array`，并返回一个包含文件类型信息的对象。

以下是一个完整的示例，展示了如何在浏览器中使用`file-type`来检测用户选择的文件类型：

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Type Detection</title>
</head>
<body>

<input type="file" id="fileInput">

<script type="module">
    import fileType from 'file-type/browser';

    document.getElementById('fileInput').addEventListener('change', async (event) => {
        const file = event.target.files[0];
        if (!file) {
            console.log("No file selected!");
            return;
        }

        const arrayBuffer = await file.arrayBuffer();
        const typedArray = new Uint8Array(arrayBuffer);

        const result = await fileType.fromBuffer(typedArray);

        if (result) {
            console.log(`File type: ${result.mime}`);
            console.log(`File extension: ${result.ext}`);
        } else {
            console.log("Could not determine the file type.");
        }
    });
</script>

</body>
</html>
```

上面的代码中，我们首先在HTML文件中创建了一个文件输入元素。然后在JavaScript模块中，我们引入了`file-type`的浏览器版本，并为文件输入元素添加了`change`事件监听器。当用户选择文件时，我们读取这个文件的内容，将其转换为`Uint8Array`，然后使用`file-type`的`fromBuffer`方法分析这个数组，最终输出文件的类型信息。

需要注意的是，`file-type`版本更新可能会带来API的变化，因此在使用时需要参考当时最新的官方文档。

Finally got this working. In case anyone else is stuck on this, here's an explanation (apologies for the lack of brevity - probably this should be a blog post...).

To flesh out the use case a bit further, I'm using [Uppy](https://uppy.io/) to allow users to upload files to an AWS S3 bucket. The way this works is that, when the user uploads a file, Uppy makes a call to my server where an AWS pre-signed URL is generated and passed back to the client. The client then uses that pre-signed URL to upload the file directly to the S3 bucket, bypassing the server, such that the file doesn't pass through the server at any point.

The problem I was attempting to solve was that files missing an extension ended up uploaded with the content / MIME type set as "application/octet", because it seems the browser, Uppy, and S3 all rely on the file extension to decide the file type (rather than parsing the so-called "magic bytes" of the file), and if the file extension is missing, AWS defaults to "application/octet". This causes issues when users attempt to open the file, as they are not handled correctly (i.e. a png file without an extension and with an "application/octet" content / MIME type opens a download dialog rather than being previewed, etc.). I also want to validate the MIME type / file type in cases even where the extension exists so that I can exclude certain types of files, and so the files get handled appropriately when they are later downloaded (where the MIME type will again be validated) if an incorrect file extension is used.

I use the "file-type" NPM module to determine the mimetype server side, and that's straight forward enough, but changing the file's content type / MIME type when generating the AWS pre-signed URL is not enough to fix the problem - it still gets uploaded as "application/octet". I wanted to use the same module client side so we get the exact same results on the client as on the server, and needed in any case to determine the MIME type and set it accordingly pre-upload but post-pre-signed URL. I had no idea how to do this (i.e. use "file-type" client side - the meat of my question).

I finally gave up on Webpack - nothing I tried worked. So I switched to Browserify, and the sample browser code at the "file-type" repository worked at once! So then I was left trying to figure out how to pass a function through Browserify to use in the client side code.

This proved impossible for me - I couldn't figure out how to pass the asynchronous IIFE through to my code. So instead, I moved my Uppy code into the code I pass to Browserify:

    // Get the dependency, which we've added to node via "npm install file-type":
    const FileType = require('file-type/browser');
    
    // When the user adds a file for upload to Uppy...
    uppy.on('file-added', (file) => {
        
        // 1. Create a filereader:
        const filereader = new FileReader();
        
        filereader.onloadend = function(evt) {
            
            // 4. Once the filereader has successfully finished reading the file...
            if (evt.target.readyState === FileReader.DONE) {
                
                // Get the unsigned 8 bit int8Array (ie Uint8Array) of the 600 bytes (this looks like '[119,80,78,71...]'):
                const uint = new Uint8Array(evt.target.result);
           
                // Determine the mime type using the "file-type" NPM package:
                (async () => {
                    
                    // Pass in our 600 bytes ("uint"):
                    const fileType = await FileType.fromBuffer(uint);
                
                    console.log(fileType); // outputs => {ext: 'jpg', mime: 'image/jpeg'}
                    
                    // Do some validation here...
                    
                    //
                    
                    //  Assign the results to the file for upload - we're done!:
                    file.extension = fileType.ext;
                    file.meta.type = fileType.mime;
                    file.type = fileType.mime;
                })();
            }
        }
        
        // 2. Grab the first 600 bytes of the file for mime type analysis server side - most mime
        // types use the first few bytes, but some (looking at you, Microsoft...) start at the 
        // 513th byte; ISO CD files start at the 32,770th byte, so we'll ignore those rather than 
        // send that much data for each file - users of this system certainly aren't expected to 
        // upload ISO CD files! Also, some .zip files may start their identifying bytes at the 
        // 29,153nd byte - we ignore those too (mostly, .zip files start at the first, 31st, or 527th byte).
        const blob = file.data.slice(0, 600);        
        
        // 3. Start reading those 600 bytes...continues above at 'filereader.onloadend':
        filereader.readAsArrayBuffer(blob);
    })
    

That all goes into a file I call "index.js" and then, having installed Browserify at the command line via "npm install -g browserify", I use this at the command line to create the file ("main.js") I link to in my client side code:

    browserify index.js -o main.js

How to use file type npm module client side

在React中，如果您想要在某些情况下（例如，当内容更新时）将`div`滚动到底部，可以通过编程方式操作DOM来实现。以下是几种可以实现这个需求的方法：

### 使用`ref`和DOM方法

您可以通过React的`ref`属性获得DOM元素的直接引用，并使用原生的DOM方法来滚动到底部。这可以通过设置`scrollTop`来实现，`scrollTop`应该等于`scrollHeight`减去`clientHeight`。

```jsx
import React, { useRef, useEffect } from 'react';

function ChatComponent() {
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(scrollToBottom, []); // 如果希望在组件首次渲染时滚动到底部，可以添加空数组作为依赖项

  return (
    <div style={{ overflowY: 'auto', height: '500px' }}>
      {/* 消息内容 */}
      <div>{/* ... */}</div>
      {/* 用于滚动的元素 */}
      <div ref={messagesEndRef} />
    </div>
  );
}
```

这里，`useEffect`用于在组件的生命周期内在适当的时刻触发滚动行为。

### 使用`scrollTop`和`scrollHeight`

如果您想要更直接控制滚动位置，可以直接设置`scrollTop`属性：

```jsx
import React, { useRef, useEffect } from 'react';

function ScrollToBottomComponent() {
  const divRef = useRef(null);

  const scrollToBottom = () => {
    const scrollHeight = divRef.current.scrollHeight;
    const height = divRef.current.clientHeight;
    const maxScrollTop = scrollHeight - height;
    divRef.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
  };

  useEffect(scrollToBottom, []); // 依据实际情况，可能需要添加其他依赖项，如消息数组

  return (
    <div ref={divRef} style={{ overflowY: 'auto', height: '500px' }}>
      {/* 消息内容 */}
      {/* ... */}
    </div>
  );
}
```

在这个例子中，我们在`useEffect`中调用`scrollToBottom`函数，这会在组件渲染后立即将`div`滚动到底部。

### 自动滚动处理新消息

如果您的`div`包含一个聊天界面，您可能希望在新消息到来时自动滚动到底部。这可以通过在`useEffect`中跟踪消息数组的变化来实现：

```jsx
import React, { useRef, useEffect } from 'react';

function AutoScrollToBottomComponent({ messages }) {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      const { scrollHeight, clientHeight } = divRef.current;
      divRef.current.scrollTop = scrollHeight - clientHeight;
    }
  }, [messages]); // 当消息数组改变时触发滚动

  return (
    <div ref={divRef} style={{ overflowY: 'auto', height: '300px' }}>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
    </div>
  );
}
```

在这个例子中，每当传入组件的`messages`数组发生变化时，`useEffect`钩子就会执行，导致`div`自动滚动到底部。

以上就是在React中将`div`滚动到底部的几种方法。您可以根据您应用的具体需求选择适合的实现方式。

As Tushar mentioned, you can keep a dummy div at the bottom of your chat:

    render () {
      return (
        <div>
          <div className="MessageContainer" >
            <div className="MessagesList">
              {this.renderMessages()}
            </div>
            <div style={{ float:"left", clear: "both" }}
                 ref={(el) => { this.messagesEnd = el; }}>
            </div>
          </div>
        </div>
      );
    }
    

and then scroll to it whenever your component is updated (i.e. state updated as new messages are added):

    scrollToBottom = () => {
      this.messagesEnd.scrollIntoView({ behavior: "smooth" });
    }
    
    componentDidMount() {
      this.scrollToBottom();
    }
    
    componentDidUpdate() {
      this.scrollToBottom();
    }
    

I'm using the standard [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method here.

I just want to update the answer to match the new `React.createRef()` [method](https://reactjs.org/docs/refs-and-the-dom.html), but it's basically the same, just have in mind the `current` property in the created ref:

    class Messages extends React.Component {
    
      const messagesEndRef = React.createRef()
    
      componentDidMount () {
        this.scrollToBottom()
      }
      componentDidUpdate () {
        this.scrollToBottom()
      }
      scrollToBottom = () => {
        this.messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
      }
      render () {
        const { messages } = this.props
        return (
          <div>
            {messages.map(message => <Message key={message.id} {...message} />)}
            <div ref={this.messagesEndRef} />
          </div>
        )
      }
    }
    

UPDATE:

Now that hooks are available, I'm updating the answer to add the use of the `useRef` and `useEffect` hooks, the real thing doing the magic (React refs and `scrollIntoView` DOM method) remains the same:

    import React, { useEffect, useRef } from 'react'
    
    const Messages = ({ messages }) => {
    
      const messagesEndRef = useRef(null)
    
      const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
      }
    
      useEffect(() => {
        scrollToBottom()
      }, [messages]);
    
      return (
        <div>
          {messages.map(message => <Message key={message.id} {...message} />)}
          <div ref={messagesEndRef} />
        </div>
      )
    }
    

Also made a (very basic) codesandbox if you wanna check the behaviour [https://codesandbox.io/s/scrolltobottomexample-f90lz](https://codesandbox.io/s/scrolltobottomexample-f90lz)

Do not use [`findDOMNode`](https://github.com/yannickcr/eslint-plugin-react/issues/678) ["because it blocks certain improvements in React in the future"](https://github.com/jsx-eslint/eslint-plugin-react/issues/678#issue-165177220)

Class components with ref
=========================

    class MyComponent extends Component {
      componentDidMount() {
        this.scrollToBottom();
      }
    
      componentDidUpdate() {
        this.scrollToBottom();
      }
    
      scrollToBottom() {
        this.el.scrollIntoView({ behavior: 'smooth' });
      }
    
      render() {
        return <div ref={el => { this.el = el; }} />
      }
    }
    

Function components with hooks:
===============================

    import React, { useRef, useEffect } from 'react';
    
    const MyComponent = () => {
      const divRef = useRef(null);
    
      useEffect(() => {
        divRef.current.scrollIntoView({ behavior: 'smooth' });
      });
    
      return <div ref={divRef} />;
    }

Thanks to @enlitement

we should avoid using `findDOMNode`, we can use `refs` to keep track of the components

    render() {
      ...
    
      return (
        <div>
          <div
            className="MessageList"
            ref={(div) => {
              this.messageList = div;
            }}
          >
            { messageListContent }
          </div>
        </div>
      );
    }
    
    
    
    scrollToBottom() {
      const scrollHeight = this.messageList.scrollHeight;
      const height = this.messageList.clientHeight;
      const maxScrollTop = scrollHeight - height;
      this.messageList.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
    }
    
    componentDidUpdate() {
      this.scrollToBottom();
    }
    

reference:

*   [https://facebook.github.io/react/docs/react-dom.html#finddomnode](https://facebook.github.io/react/docs/react-dom.html#finddomnode)
*   [https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/](https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/)

The easiest and best way I would recommend is.
----------------------------------------------

_My ReactJS version: 16.12.0_

* * *

> For Class Components
> --------------------

**HTML structure** inside `render()` function

        render()
            return(
                <body>
                    <div ref="messageList">
                        <div>Message 1</div>
                        <div>Message 2</div>
                        <div>Message 3</div>
                    </div>
                </body>
            )
        )
    

`scrollToBottom()` function which will get reference of the element. and scroll according to `scrollIntoView()` function.

      scrollToBottom = () => {
        const { messageList } = this.refs;
        messageList.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
      }
    

and call the above function inside `componentDidMount()` and `componentDidUpdate()`

* * *

> For Functional Components (Hooks)
> ---------------------------------

Import `useRef()` and `useEffect()`

    import { useEffect, useRef } from 'react'
    

Inside your export function, (same as calling a `useState()`)

    const messageRef = useRef();
    

And let's assume you have to scroll when page load,

    useEffect(() => {
        if (messageRef.current) {
          messageRef.current.scrollIntoView(
            {
              behavior: 'smooth',
              block: 'end',
              inline: 'nearest'
            })
        }
      })
    

OR if you want it to trigger once an action performed,

    useEffect(() => {
      if (messageRef.current) {
        messageRef.current.scrollIntoView(
          {
            behavior: 'smooth',
            block: 'end',
            inline: 'nearest'
          })
      }
    },
    [stateVariable])
    

And Finally, to your **HTML structure**

    return(
        <body>
            <div ref={messageRef}> // <= The only different is we are calling a variable here
                <div>Message 1</div>
                <div>Message 2</div>
                <div>Message 3</div>
            </div>
        </body>
    )
    

for more explanation about `Element.scrollIntoView()` visit [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

More detailed explanation in Callback refs visit [reactjs.org](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)

How to scroll to bottom in react?

如何检测 iframe 中的 404 错误？,在 HTML 中嵌入 `<iframe>` 通常用于在当前页面中加载另一页面。但是，当尝试加载的页面不存在或出现问题时（如返回 404 错误），默认情况下，浏览器不会提供直接的方法来检测这种错误。不过，我们可以使用一些技巧来尝试检测 `<iframe>` 中的 404 错误。

以下是一种可能的方法，使用 JavaScript 来检测 `<iframe>` 中的加载错误：

```javascript
window.addEventListener('load', function() {
  var iframe = document.getElementById('my-iframe');
  iframe.addEventListener('load', function() {
    try {
      // 尝试获取 iframe 的内容，可能会因同源策略而失败
      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

      // 检查页面是否真的加载了，通过检测 body 是否存在
      if (iframeDoc.body && iframeDoc.body.innerHTML.trim().length > 0) {
        // 页面正常加载
      } else {
        // 页面没有正常加载，可能是 404 或其他错误页面
        console.error('Iframe load failed.');
      }
    } catch (e) {
      // 同源策略错误，无法读取 iframe 的内容
      console.error('Cross-origin iframe detected. Unable to read the contents.');
    }
  });

  // 可以尝试通过设置 iframe 的 src 属性来加载页面
  iframe.src = 'https://example.com/some-page.html';
});
```

请注意，由于浏览器的同源策略（Same-Origin Policy），如果 `<iframe>` 加载的页面不是同源的，JavaScript 将无法访问 `<iframe>` 中的内容。这意味着上面的代码在跨域的情况下无法工作，并且会在控制台中抛出错误。

如果你有控制 iframe 内容页面的权限，你可以考虑在那个页面中使用 JavaScript 来发送一个消息回父页面，告知它页面已经成功加载。这可以通过 `window.postMessage` 方法完成。父页面监听这些消息，如果没有收到预期的消息，就可以假设页面加载失败了（可能是 404 或其他错误）。

这是一个简单的使用 `window.postMessage` 的示例：

父页面:

```javascript
window.addEventListener('message', function(event) {
  // 确保消息是从你的 iframe 页面发送的
  if (event.origin === 'https://example.com') {
    if (event.data === 'loadSuccess') {
      console.log('iframe loaded successfully');
    }
  }
}, false);

var iframe = document.getElementById('my-iframe');
iframe.src = 'https://example.com/some-page.html';
```

iframe 内容页面:

```javascript
// 在内容页面加载完成时发送消息
window.onload = function() {
  // 发送消息到父页面
  window.parent.postMessage('loadSuccess', '*');
};
```

请确保在实际环境中替换 `'*'` 为父页面的源（例如 `'https://parent-website.com'`），以提高安全性。这样可以防止向任意的接收者发送消息。

状态仅存在于响应标头中。
------------

404 页面正在处理[HTTP 状态代码](http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml)，该状态代码仅包含在服务器发送到浏览器的响应中，但不包含在javascript 可以访问的实际 DOM`window`和对象中。`document`这意味着，虽然您当然可以收集状态代码并采取适当的操作，但您只能在 javascript 接收响应时执行此操作，例如使用 jQuery.ajax [() 请求](https://stackoverflow.com/questions/17863062/detect-http-301-status-code-from-javascript)或[XmlHttRequest 来加载“iframe”](https://stackoverflow.com/a/10419343/1589379)。

### 希望404页面遵循404标准。

如果上述方法不可行，则唯一的其他可能性可能是检查标题和/或 H 标签中的“ 404 ”。虽然这肯定不太理想（我很想看到“404，找不到电影，电影。”），但这是您唯一的其他选择。

    $('#iframe').load(function (e) {
        var iframe = $("#iframe")[0];
    
        if ( iframe.innerHTML() ) {
            // get and check the Title (and H tags if you want)
            var ifTitle = iframe.contentDocument.title;
            if ( ifTitle.indexOf("404")>=0 ) {
                // we have a winner! probably a 404 page!
            }
        } else {
            // didn't load
        }
    });

假设这是你的 html

    <html>
        <head></head>
        <body>
          <iframe id="iframe"></iframe>
        </body>
     </html>
    

有两种场景

1.  您的 iframe 的 src 与您的页面来源位于同一域中。
    
        Ex : page url www.example.com and iframe's src www.example.com/iframe
        
    
    您可以使用 jQuery ajax 请求来检查资源是否可用
    
           $(function() {
                $.ajax({
                    type : "HEAD",
                    async : true,
                    url : "www.example.com/iframe"
                })
                .success(function() {
                    $("#iframe").attr("src", "www.example.com/iframe");
                })
                .error(function(){
                   // Handle error perhaps a failover url
                })
            });
        
    
2.  您的 iframe 的 src 未指向您的页面来源的同一域。
    
        Ex : Page url www.example.com and iframe's src www.otherdomain.com/iframe
        
    
    [现在，由于跨源政策，](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)浏览器将不允许您从 javascript 代码发出跨站点请求。解决方法是发出[jsonp 请求](https://en.wikipedia.org/wiki/JSONP)。
    
        $(function() {
            $.ajax({
                url: "www.otherdomain.com/iframe",
                dataType: "jsonp",
                timeout: 5000,
        
                success: function () {
                    $("#iframe").attr("src", "www.otherdomain.com/iframe");
                },
                error: function (parsedjson) {
                    if(parsedjson.status == "200") {
                        $("#iframe").attr("src", "www.otherdomain.com/iframe");
                    } else {
                        // Handle error
                    }
                }
            });
        });

How to detect an error 404 in an iframe?

在 Flutter 中，您通常会使用 `Color` 类来表示颜色，它接受一个 ARGB 整数作为参数。十六进制颜色字符串通常表示为 RGB 或 ARGB 格式，例如 `"#RRGGBB"` 或 `"#AARRGGBB"`，这里的 `AA` 是可选的，并表示透明度（alpha channel）。

为了使用十六进制颜色字符串，您需要将它转换成 Flutter 的 `Color` 对象。下面是如何做到这一点的步骤：

1. 如果字符串不包含透明度（即长度为 6 个字符，如 `"#RRGGBB"`），您需要在字符串前面添加 `"0xFF"` 表示完全不透明。
2. 使用 Dart 的 `int.parse` 函数将十六进制字符串转换为整数。
3. 创建一个 `Color` 对象并传入转换后的整数值。

下面是一个例子：

```dart
String hexColorStr = "#34A853"; // 一个示例颜色字符串，不带透明度
String hexColorStrWithAlpha = "#FF34A853"; // 这个字符串包括透明度（FF 表示完全不透明）

// 如果不包含透明度值，添加“0xFF”来使用完全不透明的颜色
hexColorStr = "0xFF" + hexColorStr.substring(1);

// 将颜色字符串转换成十六进制整数并创建 Color 对象
Color color = Color(int.parse(hexColorStr));

// 如果包括透明度值，直接解析
Color colorWithAlpha = Color(int.parse(hexColorStrWithAlpha.substring(1), radix: 16));

// 现在可以在 Flutter 中使用这个颜色了，例如:
Container(
  color: color, // 或者用 colorWithAlpha
  child: ...
);
```

请注意，在 Dart 中，十六进制数是以 `"0x"` 开头的，因此我们在解析时需要去掉字符串中的 `"#"` 并替换为 `"0x"`（或者直接添加 `"0xFF"` 作为不透明度前缀）。

以上就是在 Flutter 中使用十六进制颜色字符串的一种方法。

在 Flutter 中，**[`Color`类](https://api.flutter.dev/flutter/dart-ui/Color-class.html)**只接受_**整数**作为参数_，或者可以使用命名构造函数[`fromARGB`](https://api.flutter.dev/flutter/dart-ui/Color/Color.fromARGB.html)和[`fromRGBO`](https://api.flutter.dev/flutter/dart-ui/Color/Color.fromRGBO.html)。

所以我们只需要将字符串转换`#b74093`为整数值即可。此外，我们还需要尊重始终需要指定的**不透明度。**  
`255`（完全）不透明度由十六进制值表示`FF`。这已经给我们留下了**`0xFF`**。现在，我们只需要像这样附加颜色字符串：

    const color = const Color(0xffb74093); // Second `const` is optional in assignments.
    

字母可以选择大写或不大写：

    const color = const Color(0xFFB74093);
    

* * *

如果您想使用_不透明度百分比值，您可以_[用此表](https://gist.github.com/creativecreatorormaybenot/8710f6f752f6a0f2cae13abb538f0e8e#hex-opacity-values)`FF`中的值替换第一个值（也适用于其他颜色通道）。[](https://gist.github.com/creativecreatorormaybenot/8710f6f752f6a0f2cae13abb538f0e8e#hex-opacity-values)

扩展类
---

[从 Dart 开始`2.6.0`，您可以为该类创建一个`extension`](https://stackoverflow.com/a/58288266/6509751)`Color`允许您使用十六进制颜色字符串来创建对象的for类`Color`：

    extension HexColor on Color {
      /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
      static Color fromHex(String hexString) {
        final buffer = StringBuffer();
        if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
        buffer.write(hexString.replaceFirst('#', ''));
        return Color(int.parse(buffer.toString(), radix: 16));
      }
    
      /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
      String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
          '${alpha.toRadixString(16).padLeft(2, '0')}'
          '${red.toRadixString(16).padLeft(2, '0')}'
          '${green.toRadixString(16).padLeft(2, '0')}'
          '${blue.toRadixString(16).padLeft(2, '0')}';
    }
    

该方法也可以在or`fromHex`中声明，因为需要显式指定名称才能使用它，但扩展对于该方法很有用，可以隐式使用。这是一个例子：`mixin``class``HexColor``toHex`

    void main() {
      final Color color = HexColor.fromHex('#aabbcc');
    
      print(color.toHex());
      print(const Color(0xffaabbcc).toHex());
    }
    

### 使用十六进制字符串的缺点

这里的许多其他答案都展示了如何`Color`从十六进制字符串动态创建 a ，就像我上面所做的那样。然而，这样做意味着颜色不能是`const`.  
理想情况下，您可以按照我在本答案第一部分中解释的方式分配颜色，这在大量实例化颜色时更有效，这通常是 Flutter 小部件的情况。

该类`Color`需要一个 ARGB 整数。_由于您尝试将其与RGB_值一起使用，因此请将其表示为_int_并添加前缀`0xff`.

    Color mainColor = Color(0xffb74093);
    

* * *

如果您对此感到烦恼并且仍然希望使用字符串，您可以扩展`Color`并添加一个字符串构造函数

    class HexColor extends Color {
      static int _getColorFromHex(String hexColor) {
        hexColor = hexColor.toUpperCase().replaceAll("#", "");
        if (hexColor.length == 6) {
          hexColor = "FF" + hexColor;
        }
        return int.parse(hexColor, radix: 16);
      }
    
      HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
    }
    

用法

    Color color1 = HexColor("b74093");
    Color color2 = HexColor("#b74093");
    Color color3 = HexColor("#88b74093"); // If you wish to use ARGB format

如果你想使用格式为#123456的颜色的十六进制代码，那么这很容易做到。创建一个 Color 类型的变量并为其分配以下值。

    Color myHexColor = Color(0xff123456)
    
    // Here you notice I use the 0xff and that is the opacity or transparency
    // of the color and you can also change these values.
    

使用 myHexColor 就可以开始了。

如果要直接从十六进制代码更改颜色的不透明度，请将_0xff中的__ff_值更改为下表中的相应值。（或者你可以使用

    myHexColor.withOpacity(0.2)
    

这是更简单的方法。0.2 是平均 20% 不透明度）

### 十六进制不透明度值

    100% — FF
    
    95% — F2
    
    90% — E6
    
    85% — D9
    
    80% — CC
    
    75% — BF
    
    70% — B3
    
    65% — A6
    
    60% — 99
    
    55% — 8C
    
    50% — 80
    
    45% — 73
    
    40% — 66
    
    35% — 59
    
    30% — 4D
    
    25% — 40
    
    20% — 33
    
    15% — 26
    
    10% — 1A
    
    5% — 0D
    
    0% — 00

**如何在 Flutter 中使用十六进制颜色代码#B74093**

只需从十六进制颜色代码中删除该`#`符号，并在 Color 类中添加 0xFF 和颜色代码：

`#b74093``Color(0xffb74093)`在 Flutter 中将会变成

`#B74093``Color(0xFFB74093)`在 Flutter 中将会变成

in`ff or FF`定义`Color(0xFFB74093)`不透明度。

**[Dartpad 中所有不透明度类型的十六进制颜色示例](https://dartpad.dev/d1b1bcd13e74d0296a32e15c437aab84?)**

[![在此输入图像描述](https://i.stack.imgur.com/eWgn3.png)](https://i.stack.imgur.com/eWgn3.png)

简单的方法：

    String color = yourHexColor.replaceAll('#', '0xff');
    

用法：

    Container(
      color: Color(int.parse(color)),
    )

How do i use hexadecimal color strings in flutter?

在 JavaScript 中等待 iframe 内容加载完成，一般有几种常用的方法，分别是使用 `load` 事件、`DOMContentLoaded` 事件和轮询 `document.readyState` 属性。以下是对这些方法的详细解释和示例：

### 使用 `load` 事件

`load` 事件在 iframe 的所有内容（包括图像、脚本文件等）加载完成后触发。监听 iframe 的 `load` 事件是最简单直接的方法：

```javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    console.log('Iframe 完全加载完成');
    // 在这里执行其他操作
};
```

或者使用 `addEventListener` 方法：

```javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    console.log('Iframe 完全加载完成');
    // 在这里执行其他操作
});
```

### 使用 `DOMContentLoaded` 事件

如果你只关心 iframe 的文档内容（不包括像图片这样的资源），可以使用 `DOMContentLoaded` 事件。这个事件在文档被完全加载和解析后立即触发，不需要等待样式表、图片和子框架的加载完成。

```javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.addEventListener('DOMContentLoaded', function() {
        console.log('Iframe 的 DOM 内容加载完成');
        // 在这里执行其他操作
    });
});
```

### 轮询 `document.readyState`

如果上述事件不适用于你的特定情况（例如，你无法保证能够在 `DOMContentLoaded` 触发之前设置事件监听器），你还可以通过轮询检查 iframe 的 `document.readyState` 属性：

```javascript
var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

function checkIframeLoaded() {
    // 检查 iframe 的 document 是否加载完成
    if (iframeDocument.readyState === 'complete' || iframeDocument.readyState === 'interactive') {
        console.log('Iframe 内容加载完成');
        // 在这里执行其他操作
    } else {
        // 如果没有加载完成，再次检查
        setTimeout(checkIframeLoaded, 100);
    }
}

checkIframeLoaded();
```

### 总结
根据您的具体需求，可以选择监听 `load` 事件来等待所有资源加载完毕，或者使用 `DOMContentLoaded` 事件等待 DOM 内容渲染完毕，或者不断轮询 `document.readyState` 属性来确定加载状态。在实际应用中，您可以根据 iframe 中内容的具体情况和您希望执行操作的时机来选择最合适的方法。

首先，我相信你应该影响`src`iframe 的属性，而不是`location`. 其次，挂钩 iframe 的`load`事件来执行更改：

    var myIframe = document.getElementById('righttop');
    myIframe.addEventListener("load", function() {
      this.contentWindow.document.notesform.ID_client.value = Client;
    });
    myIframe.src = 'timesheet_notes.php';
    

再次强调，这一切都假设您指的是**i**框架，而不是框架集。

我想你可以很容易地用 jQuery 来做到这一点... [jQuery Home](http://www.jquery.com) 只需将页面挂接到 jQuery `$ function ()`... 例如

    $(document).ready(function() { 
        $('iframe').load(function() { 
           // write your code here....
        });
    });
    

快速查看此处的文件上传器示例： [Using iframes for multiple file uploads...](http://sushantp.wordpress.com/2009/05/11/using-iframes-for-multiple-file-uploads-and-using-jquery-to-communicate-between-main-document-and-iframes/)

iFrame 可以动态加载元素，使用它们的最佳选择是使用递归：

     $('iframe').ready(function() {
       var triggerMeAgainIfNeeded = function() {
          setTimeout(function() {
              var neededElm = $('.someElementThatLoadedAfterIframe');
               if (neededElm.length > 0) {
                 // do your job
               } else {
                 triggerMeAgainIfNeeded();
               }
           }, 10);
       }
    });

尝试这个简单的解决方案：

    const myIframe = document.querySelector('iframe[name="my-iframe"]');
    const waitForMyIframeToReload = () => (new Promise(resolve => myIframe.addEventListener('load', () => resolve())));
    myIframe.contentWindow.location.reload(true);
    await waitForSdiIframeToReload();
    console.log('I executed after the iframe loaded'));

    <html>
      <body style="height: 100%; width: 100%;">
        <iframe name="my-iframe" src="https://platform.twitter.com/widgets/tweet_button.html" style="height: 100%; width: 100%;"></iframe>
      </body>
    </html>

运行代码片段Hide results

展开片段

How to wait for iframe to load in javascript

在检测`iframe`开始加载新URL时，通常会用到JavaScript中的事件监听器。以下是一些方法，可以用来监测`iframe`何时开始加载新的URL：

### 方法1：使用 `onload` 事件

要检测`iframe`是否完成了新URL的加载，可以监听`iframe`的`onload`事件。但是，它只能告诉我们`iframe`什么时候加载完成，并不能直接告诉我们何时开始。不过，我们可以在设置新的`src`属性之前初始化一些操作，来模拟“开始加载”的检测：

```javascript
var iframe = document.getElementById('myIframe');

// 当`iframe`开始加载新URL时执行的函数
function onIframeStartLoad() {
    console.log('开始加载新的URL...');
}

// 当`iframe`完成加载新URL时执行的函数
function onIframeLoad() {
    console.log('新的URL加载完成');
}

// 监听`iframe`的`onload`事件
iframe.onload = onIframeLoad;

// 更改`iframe`的`src`属性以开始加载新的URL
iframe.src = 'https://example.com'; // 在设置`src`之前，我们知道加载即将开始
onIframeStartLoad(); // 手动调用开始加载的函数
```

### 方法2：使用 `addEventListener` 方法

我们可以使用`addEventListener`来给`iframe`添加`load`事件监听器，这更适合现代浏览器和动态事件管理：

```javascript
var iframe = document.getElementById('myIframe');

iframe.addEventListener('load', function() {
    console.log('新的URL加载完成');
});

// 在更改`iframe`的`src`之前，我们可以执行某些操作
console.log('开始加载新的URL...');
iframe.src = 'https://example.com';
```

### 方法3：使用 `MutationObserver`

如果您希望检测`iframe`的`src`属性何时被改变（而不一定是加载完成），可以使用`MutationObserver`。这允许您监视DOM更改，例如属性的改变：

```javascript
var iframe = document.getElementById('myIframe');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
            console.log('iframe src 属性改变，新的URL开始加载');
        }
    });
});

observer.observe(iframe, {
    attributes: true // 配置观察者只观察属性的变动
});

// 更改`iframe`的`src`属性
iframe.src = 'https://example.com';
```

### 方法4：使用 `beforeunload` 事件

在一些特定的情况下，你可能想要在原有页面即将卸载时检测到`iframe`开始加载新页面的行为。在这种情况下，可以使用`beforeunload`事件：

```javascript
var iframe = document.getElementById('myIframe');

iframe.contentWindow.onbeforeunload = function() {
    console.log('iframe 即将开始加载新页面');
};

// 更改`iframe`的`src`属性
iframe.src = 'https://example.com';
```

请注意，这种方法可能会受到跨域政策的限制，因为它需要访问`iframe`的`contentWindow`对象。

总结一下，通常来说，我们可以通过监听`iframe`的`load`事件或者使用`MutationObserver`来检测`iframe`何时开始加载新的URL。确保在设置新的`src`属性之前进行必要的操作，可以帮助我们定位到加载的开始时机。在实际的应用中，选择哪种方法取决于具体的需求和场景。

我找到了一个更好的解决方案，如果 iframe 和容器页面同源，则不必将额外的代码放入内部页面：

    <iframe src="same-origin.com" onload="content_finished_loading(this)"></iframe>
    <script>
        var indicator = document.querySelector('.loading-indicator');
        var content_start_loading = function() {
            indicator.style.display = 'block';
        };
    
        var content_finished_loading = function(iframe) {
            indicator.style.display = 'none';
            // inject the start loading handler when content finished loading
            iframe.contentWindow.onunload = content_start_loading;
        };
    </script>

我想出了以下解决方案 - 这是唯一可能的，因为我们控制 iframe 内容和主机窗口的内容

在 iframe 内，我们将以下脚本添加到页面页脚（所有页面都使用相同的模板，因此这是对单个文件的更改）

    <script>
    window.onunload = function() {
        // Notify top window of the unload event
        window.top.postMessage('iframe_change', '*');
    };
    </script>
    

在主机窗口内，我们添加此脚本来监视 iframe 状态

    function init_content_monitor() {
        var content = jQuery('.iframe');
    
        // The user did navigate away from the currently displayed iframe page. Show an animation
        var content_start_loading = function() {
            alert ('NOW: show the animation');
        }
    
        // the iframe is done loading a new page. Hide the animation again
        var content_finished_loading = function() {
            alert ('DONE: hide the animation');
        }
    
        // Listen to messages sent from the content iframe
        var receiveMessage = function receiveMessage(e){
            var url = window.location.href,
                url_parts = url.split("/"),
                allowed = url_parts[0] + "//" + url_parts[2];
    
            // Only react to messages from same domain as current document
            if (e.origin !== allowed) return;
            // Handle the message
            switch (e.data) {
                case 'iframe_change': content_start_loading(); break;
            }
        };
        window.addEventListener("message", receiveMessage, false);
    
        // This will be triggered when the iframe is completely loaded
        content.on('load', content_finished_loading);
    }

How to detect when an iframe starts to load new url?

在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;
    

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

How to pass value to iframe from a window

当您希望防止其他第三方网站通过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 视频作为惩罚。事实上，他们只是自己翻滚。

How to prevent my site page to be loaded via 3rd party site frame of 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)

How to preventing iframe caching in browser

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

### 方法一：使用 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`

How to check if iframe is loaded or it has a content

不，`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)

Is it possible to add request headers to an iframe src request

当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 的通信示例。

希望这对其他人有帮助。

How to communicate between iframe and the parent site

要重新加载或刷新`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();

What s the best way to reload refresh an 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 具有“沙箱”属性，可能会阻止弹出窗口等

What is the difference between iframe embed and object elements

在使用 `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_内的所有链接都将在外部打开。

How to force link from iframe to be opened in the parent window

在使用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时。

所有问题