Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。



前端

在Vue.js项目中，内存泄露可能导致应用性能下降甚至浏览器崩溃，因此非常重要的是要识别并避免这些问题。以下是一些常见的内存泄露场景以及如何解决它们的例子：

### 1. 组件未被正确销毁

在使用Vue.js时，如果组件在被移除后没有被正确销毁，那么该组件的所有数据、方法以及子组件都可能仍然驻留在内存中。

**举例**：
假设我们有一个父组件和一个子组件，如果我们从父组件中移除了子组件但没有触发Vue的`destroyed`生命周期钩子，那么这个子组件可能就会造成内存泄露。

**解决方案**：
确保在组件销毁时使用`this.$destroy()`方法，或者确保使用Vue的条件渲染（如`v-if`）来完全销毁组件，而不是仅仅隐藏它们（使用`v-show`）。

### 2. 未取消的事件监听器和定时器

如果在组件被销毁之前没有取消事件监听器或清除定时器，这些仍然活跃的监听器和定时器会持续占用内存。

**举例**：
在组件创建时设置了`window.addEventListener('resize', this.handleResize)`和`setInterval(this.fetchData, 2000)`，但在组件销毁时忘记移除监听器和清除定时器。

**解决方案**：
在Vue组件的`beforeDestroy`生命周期钩子中，移除所有事件监听器和清除所有定时器。如：
```javascript
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
  clearInterval(this.intervalId);
}
```

### 3. 闭包引用

在Vue中使用闭包时，如果闭包引用了外部变量，而这些外部变量包含对DOM的引用或者其他占用内存较大的数据结构，可能会导致内存泄露。

**举例**：
在一个Vue方法中创建了闭包来访问组件的数据，但是闭包被外部变量持有。

**解决方案**：
确保闭包不会无限期持有大量数据或DOM引用。当不再需要时，将引用设置为`null`或使用函数而非闭包来处理相应逻辑。

### 4. Vuex状态管理

在使用Vuex进行状态管理时，如果没有正确管理或清理状态，随着应用的运行，状态数据可能会不断累积，导致内存不断增长。

**举例**：
在Vuex的store中持续添加新的状态数据而没有清理旧的状态，特别是在含有大量数据操作的大型应用中。

**解决方案**：
定期评估和清理Vuex store中不再需要的状态，特别是在完成例如用户登出这类清理会话信息的操作时。

通过监控和优化这些常见的内存泄漏场景，可以显著提高Vue应用的性能和稳定性。

说说 Vue 项目中有哪些内存泄露的场景

在JavaScript中，数组是一种常用的数据结构，用于存储一系列的元素。JavaScript为数组提供了多种方法来管理和操作数组中的数据。下面我会介绍一些常用的数组方法，以及它们的区别和使用场景。

### 1. `push()` 和 `pop()`
- **`push()`** 方法用于将一个或多个元素添加到数组的末尾，并返回新数组的长度。
- **`pop()`** 方法用于移除数组的最后一个元素，并返回被移除的元素。

**使用场景**：当需要实现栈结构（后进先出）时，这两个方法非常适合。

### 示例：
```javascript
let fruits = ['apple', 'banana'];
fruits.push('orange'); // 返回新数组长度，fruits变为['apple', 'banana', 'orange']
let lastFruit = fruits.pop(); // 返回'orange', fruits回到['apple', 'banana']
```

### 2. `shift()` 和 `unshift()`
- **`shift()`** 方法用于移除数组的第一个元素，并返回该元素。
- **`unshift()`** 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

**使用场景**：这一对方法适用于需要操作数组前端元素的情形，如在实现队列结构（先进先出）时使用。

### 示例：
```javascript
let numbers = [1, 2, 3];
numbers.unshift(0); // 返回新数组长度，numbers变为[0, 1, 2, 3]
let firstNumber = numbers.shift(); // 返回0，numbers回到[1, 2, 3]
```

### 3. `map()` 和 `filter()`
- **`map()`** 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。
- **`filter()`** 方法创建一个新的数组，包含通过所提供函数实现测试的所有元素。

**使用场景**：`map()`用于转换数组中的每个元素，而`filter()`用于筛选出符合条件的元素。

### 示例：
```javascript
let numbers = [1, 2, 3, 4];
let squares = numbers.map(x => x * x); // 返回新数组[1, 4, 9, 16]
let evens = numbers.filter(x => x % 2 === 0); // 返回新数组[2, 4]
```

### 4. `reduce()`
- **`reduce()`** 方法对数组中的每个元素执行一个由您提供的“reducer”函数（升序执行），将其结果汇总为单个返回值。

**使用场景**：用于将数组元素进行累加、累乘或者根据特定逻辑累积成一个值。

### 示例：
```javascript
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 返回10
```

### 5. `forEach()`
- **`forEach()`** 方法对数组的每个元素执行一次给定的函数。

**使用场景**：遍历数组元素，进行操作，但不需要返回新数组。

### 示例：
```javascript
let letters = ['a', 'b', 'c'];
letters.forEach(letter => console.log(letter)); // 依次打印'a', 'b', 'c'
```

这些是JavaScript中一些常用的数组方法。每个方法根据其特定的使用场景和需求来选择使用，可以帮助开发者更高效地处理数组数据。

数组有哪些方法 讲讲区别跟使用场景

在使用CSS网格系统时，如果您想实现每隔一行着色的效果，可以通过简单的CSS选择器来完成。这种方法不仅简洁，而且易于维护。我将通过一个具体的例子来展示如何实现这一点。

假设您有一个网格容器，包含多个行元素，您希望每隔一行改变背景颜色。这里是实现这一功能的CSS代码：

```css
/* 设置网格容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列 */
  grid-gap: 10px; /* 网格间隙 */
}

/* 默认背景色 */
.grid-item {
  padding: 20px;
  border: 1px solid #ccc;
}

/* 每隔一行着色 */
.grid-item:nth-child(odd) {
  background-color: #f2f2f2;
}
```

接下来是HTML部分：

```html
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  
</div>
```

在这个例子中，`.grid-item:nth-child(odd)` 选择器选中了所有奇数的子元素（即第1，3，5...个元素），并将它们的背景色设置为`#f2f2f2`。这样，每隔一行的元素就会显示不同的背景色，从而达到了您所需要的效果。

这种方法的优点是简单且易于理解，同时使用`:nth-child()`选择器提供了高度的灵活性，您可以根据需求调整选择器逻辑，以适应不同的样式需求。

如何使用 CSS 网格每隔一行着色

在 React Native 开发中，调试是一个非常重要的环节，可以帮助开发者定位和解决问题。虽然 React Native 内置了许多调试工具，如 React Developer Tools 或 Redux DevTools，但有时我们需要更直接地在设备上进行调试。对于在 iPhone 模拟器上进行调试，通常情况下我们会使用 Chrome 或 React Native 自带的调试工具，但也可以通过Safari进行。

以下是通过 Safari 调试 React Native 应用在 iPhone 模拟器上的具体步骤：

1. **确保你的 Mac 和 iPhone 模拟器正确配置**: 首先，确保你的开发环境设置正确，你的 React Native 应用能在 iPhone 模拟器上运行。

2. **启动你的 React Native 应用**: 在你的终端（Terminal）中，进入你的 React Native 项目目录，然后运行 `npm start` 来启动 Metro Bundler，接着在另一个终端窗口运行 `npx react-native run-ios` 来启动你的应用在模拟器上。

3. **启用 Safari 的开发者选项**: 在你的 Mac 上，打开 Safari，然后在菜单栏中选择“Safari” -> “偏好设置” -> “高级”，勾选“在菜单栏中显示‘开发’菜单”。

4. **连接到模拟器**: 在你的 iPhone 模拟器运行应用后，打开 Mac 上的 Safari。在顶部菜单栏中选择“开发”。你应该能看到一个名为“模拟器”的菜单选项，将鼠标悬停在其上，你应该能看到当前运行在模拟器中的 React Native 应用。点击这个选项。

5. **开始调试**: 点击后，Safari 的 Web Inspector 将会打开，这里你可以查看控制台日志、网络请求、页面元素等信息。你可以像在网页开发中一样进行调试。

通过以上步骤，你可以利用 Safari 来调试在 iPhone 模拟器上运行的 React Native 应用。这种方式特别适合于调试应用的 WebView 组件以及与网页内容相关的问题。不过一般来说，更推荐使用 React Native 自带的调试工具或 Chrome，因为它们提供了更为专业的React组件树的调试支持。

React native 怎么通过 Safari 调试 iPhone 模拟器？

在Rollup 中配置多个输入文件并将它们合并成一个输出文件，主要可以通过使用 `@rollup/plugin-virtual` 插件来实现。这种方式允许我们从多个源文件创建一个虚拟的“入口点”，在这个入口点中导入所有需要的模块，然后Rollup将会处理这些模块，最终输出单个打包后的文件。

下面是一个具体的步骤和示例说明如何实现：

### 1. 安装必要的插件

首先，你需要安装 Rollup 和 @rollup/plugin-virtual。你可以使用 npm 来安装这些包：

```bash
npm install rollup @rollup/plugin-virtual --save-dev
```

### 2. 配置 Rollup

接下来，你需要在 `rollup.config.js` 文件中配置 Rollup。这里是一个配置多个输入文件生成单个输出文件的示例配置：

```javascript
// 导入 virtual 插件
import virtual from '@rollup/plugin-virtual';

export default {
  // 使用 virtual 插件创建一个虚拟的入口文件
  input: 'virtual-entry',
  plugins: [
    virtual({
      'virtual-entry': `
        // 在这里导入你的模块文件
        import './src/module1.js';
        import './src/module2.js';
        // 可以继续导入更多的模块
      `
    })
  ],
  output: {
    file: 'bundle.js', // 输出文件的路径和名称
    format: 'iife' // 输出格式，这里使用自执行函数
  }
};

```

### 3. 解释代码

在上面的配置中，我们创建了一个名为 `virtual-entry` 的虚拟入口文件。在这个虚拟文件中，我们导入了需要打包的所有模块文件。`@rollup/plugin-virtual` 插件会处理这个虚拟入口，并且 Rollup 会分析和打包这些模块，最终生成指定的单个输出文件。

### 4. 运行 Rollup

最后，你可以通过下面的命令来运行 Rollup，并生成打包文件：

```bash
npx rollup -c
```

这将会根据 `rollup.config.js` 中的配置生成 `bundle.js` 文件。

### 总结

通过使用 `@rollup/plugin-virtual` 插件，我们能够非常灵活地配置 Rollup 从多个模块文件中生成单个输出文件。这种方法在需要将多个分散的模块合并为一个库或应用程序时非常有用。

如何在Rollup中配置从多个输入文件中仅生成单个输出文件？

在React Native中，如果我们使用的是React Navigation库，隐藏导航栏的后退按钮是一个相对简单的任务。这通常是在页面或者应用的导航选项中配置的。

### 步骤如何隐藏后退按钮：

1. **在StackNavigator中直接配置**：
   
   当你设置StackNavigator的时候，可以通过在特定屏幕的`navigationOptions`中设置`headerLeft`为null，来隐藏后退按钮。这样可以在进入页面时不显示左侧的后退按钮。

   ```javascript
   import { createStackNavigator } from 'react-navigation-stack';

   const Stack = createStackNavigator({
     Home: {
       screen: HomeScreen,
     },
     Details: {
       screen: DetailsScreen,
       navigationOptions: {
         headerLeft: () => null,  // 这里隐藏后退按钮
       }
     },
   });
   ```

2. **动态隐藏后退按钮**：

   如果需要根据某些条件动态隐藏后退按钮，可以在组件内部使用`navigation.setOptions`方法来实现。

   ```javascript
   function DetailsScreen({ navigation }) {
     useEffect(() => {
       navigation.setOptions({
         headerLeft: () => null
       });
     }, [navigation]);

     return (
       <View>
         <Text>Details Screen</Text>
       </View>
     );
   }
   ```

### 示例说明：

在上述第一个示例中，我们创建了一个`StackNavigator`，其中包含`Home`和`Details`两个屏幕。在`Details`屏幕的导航选项中，我们将`headerLeft`设置为`null`，这样当用户导航到Details屏幕时，将不会看到左上角的后退按钮。

在第二个示例中，我们通过在组件的`useEffect`中调用`navigation.setOptions`来动态地设置`headerLeft`为`null`。这种方法适用于需要根据某些运行时数据或状态动态决定是否显示后退按钮的场景。

使用这些方法，可以灵活地控制React Native应用中的导航栏后退按钮的显示与隐藏。

React native如何隐藏导航后退按钮？

在将文件对象转换为URL的过程中，首先需要明确文件对象的来源和类型，以及您希望生成的URL的使用场景。通常而言，这个过程可以在Web开发中通过下面几种方式来实现：

### 1. 使用静态文件服务器
在Web开发中，通常会将文件存储在静态文件服务器上。例如，在一个Node.js项目中，可以使用`express.static`中间件来托管静态文件夹，然后通过网络访问这些文件。

**例子：**
```javascript
const express = require('express');
const app = express();

// public是存放静态文件的文件夹
app.use('/static', express.static('public'));

app.listen(3000, () => {
  console.log('App running on port 3000');
});
```
在这个例子中，如果你有一个图片`image.png`存放在`public`文件夹中，那么它的URL将会是 `http://localhost:3000/static/image.png`。

### 2. 使用对象存储服务
如果是在云平台上，可以使用象S3, Azure Blob Storage或Google Cloud Storage等对象存储服务来存储文件。上传文件后，这些服务通常能提供一个URL来访问这些文件。

**例子：**
```python
import boto3
from botocore.exceptions import NoCredentialsError

def upload_to_s3(file_name, bucket):
    s3 = boto3.client('s3')
    try:
        s3.upload_file(file_name, bucket, file_name)
        url = f"https://{bucket}.s3.amazonaws.com/{file_name}"
        return url
    except FileNotFoundError:
        return "The file was not found"
    except NoCredentialsError:
        return "Credentials not available"

# 调用函数上传文件
bucket_name = 'your_bucket_name'
file_name = 'your_local_file.jpg'
url = upload_to_s3(file_name, bucket_name)
print(url)
```
在这个例子中，将文件`your_local_file.jpg`上传到S3的某个bucket后，函数返回该文件的URL。

### 3. 通过Blob URL在浏览器中直接创建
在前端开发中，可以使用JavaScript的`URL.createObjectURL()`方法将文件对象（如从<input>元素中获取的文件）转换为一个Blob URL，这个URL可以用于预览等目的。

**例子：**
```html
<input type="file" id="fileInput">
<img id="preview" src="">

<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const blobURL = URL.createObjectURL(file);
    document.getElementById('preview').src = blobURL;
  });
</script>
```
在这个例子中，用户选择文件后，会立即在`<img>`标签中预览文件。

这些是常见的几种将文件对象转换为URL的方法，具体使用哪种方法取决于您的具体需求和技术栈。

如何将文件对象转换为url

在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

JS 如何在客户端使用 file-type 检测文件类型？

如何检测 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
                    }
                }
            });
        });

如何检测 iframe 加载页面的 404 错误？

在 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

展开片段

如何在 javascript 中等待 iframe 加载进度？

在检测`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);
    }

如何检测 iframe 何时开始加载新的 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;
    

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

如何从窗口向 iframe 传递值

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### 结合使用

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

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

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

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

并且配置CSP：

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

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

### 注意事项

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#### 例子：

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

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

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

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

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

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

#### 例子：

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

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

使用 JavaScript 可以这样设置：

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

### 3. 使用 meta 标签

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

#### 例子：

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

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

这是 Firefox 中的一个错误：

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

尝试这个解决方法：

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

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

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

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

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

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

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

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

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

例如：

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

**2- 迂回方式**

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

和

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

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

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

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

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

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

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

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

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

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

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

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

两者都指向同一页面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


尝试这个。

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

请使用：

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

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

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

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

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

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

  
和，  

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

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

最简单的选择：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例如在顶部窗口中：

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

并在 iframe 中：

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

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

例如在顶部窗口中：

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

并在 iframe 中：

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

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

内嵌框架：

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

家长：

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

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

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

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

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

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

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

来自内嵌框架

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

然后从父母那里说回来。

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

### 更新：

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

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

你需要这样做

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

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

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

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

从 iframe 到父级：

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

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

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

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

希望这对其他人有帮助。

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

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

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

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

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

#### 优点

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

#### 缺点

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

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

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

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

#### 优点

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

#### 缺点

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

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

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

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

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

#### 优点

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

#### 缺点

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

### 综合考虑

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### Iframe：

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

### Object：

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

### 示例：

**Iframe 示例**：

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

**Object 示例**：

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

### 结论：

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

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

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

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

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

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

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

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

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

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

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

    parent = window.parent.document;
    

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

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

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

结论
==

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

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

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

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

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

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

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

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

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

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

   例如：

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

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

   例如：

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

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

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

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

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

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

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

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

    <base target="_parent">
    

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

    <base target="_blank">
    

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

使用目标属性：

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

使用 JavaScript：

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

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

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

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

`<base target="_parent" />`

**或者**

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

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

**或者**

**如果是嵌套 iframe：**

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

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

**或者**

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

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

或者

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

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

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

    <base target="_blank" />
    

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

前端相关问题

说说 Vue 项目中有哪些内存泄露的场景

数组有哪些方法讲讲区别跟使用场景

如何使用 CSS 网格每隔一行着色

React native 怎么通过 Safari 调试 iPhone 模拟器？

如何在Rollup中配置从多个输入文件中仅生成单个输出文件？

React native如何隐藏导航后退按钮？

如何将文件对象转换为url

JS 如何在客户端使用 file-type 检测文件类型？

如何检测 iframe 加载页面的 404 错误？

如何在 javascript 中等待 iframe 加载进度？

如何检测 iframe 何时开始加载新的 url ？

如何从窗口向 iframe 传递值

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

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

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

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

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

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

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

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

前端相关问题

说说 Vue 项目中有哪些内存泄露的场景

数组有哪些方法 讲讲区别跟使用场景

如何使用 CSS 网格每隔一行着色

React native 怎么通过 Safari 调试 iPhone 模拟器？

如何在Rollup中配置从多个输入文件中仅生成单个输出文件？

React native如何隐藏导航后退按钮？

如何将文件对象转换为url

JS 如何在客户端使用 file-type 检测文件类型？

如何检测 iframe 加载页面的 404 错误？

如何在 javascript 中等待 iframe 加载进度？

如何检测 iframe 何时开始加载新的 url ？

如何从窗口向 iframe 传递值

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

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

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

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

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

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

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

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

数组有哪些方法讲讲区别跟使用场景