在 iframe 页面中使用 document.domain

在 iframe 页面中使用 `document.domain` 属性可以实现跨子域名的 Cookie 共享。具体实现方法如下：

1. 在主页面和 iframe 页面中都设置 `document.domain` 属性为主域名，例如 `example.com`。

document.domain = 'example.com';

2. 在主页面中设置 Cookie。

document.cookie = 'name=value; domain=example.com';

3. 在 iframe 页面中访问主页面的 Cookie。

var cookie = document.cookie;

这样，在主页面和 iframe 页面中就可以共享 Cookie 了。需要注意的是，`document.domain` 属性只能设置为主域名或其父域名，否则会抛出异常。另外，使用这种方法进行跨域 Cookie 共享时，应该确保主域名和子域名的 Cookie 名称不冲突，以免产生不必要的问题。

相关问题

<div class="content" style="height: 100%;" > <iframe width='100%' height='100%' frameBorder='0' src='https://zt.changjing.com.cn/map/8kUyMJ-dCOknRL7Ntn5y9w/embed?base_map=normal&center=113.22956797%2C23.407374725&level=16' style="height:1000px;"></iframe> <script> window.onload = function() { document.querySelector('input[type="password"]').value = "110110"; } </script> </div> 不能自动输入，如何修改

可以尝试将自动输入密码的代码放到 `iframe` 的 `onload` 回调函数中执行，这样可以确保页面加载完成后再自动输入密码。修改后的代码如下：

<div class="content" style="height: 100%;">
  <iframe
    id="my-iframe"
    width="100%"
    height="100%"
    frameborder="0"
    src="https://zt.changjing.com.cn/map/8kUyMJ-dCOknRL7Ntn5y9w/embed?base_map=normal&center=113.22956797%2C23.407374725&level=16"
    style="height:1000px;"
  ></iframe>
  <script>
    document.getElementById("my-iframe").onload = function () {
      var passwordInput = this.contentDocument.querySelector(
        'input[type="password"]'
      );
      if (passwordInput) {
        passwordInput.value = "110110";
      }
    };
  </script>
</div>

此代码会在 `iframe` 加载完成后，检查 `iframe` 内部是否有密码输入框，如果有则自动填入密码。注意，由于涉及跨域问题，如果 `iframe` 的内容来自不同的域名，则需要在 `iframe` 页面中设置 `document.domain` 属性，以便实现跨域通信。

vue iframe页面嵌套404

### Vue 中 iframe 嵌套页面出现 404 的原因分析

当在 Vue 项目中使用 `iframe` 加载外部资源时，如果遇到 404 错误，通常是因为所请求的 URL 不正确或服务器端配置不当。具体来说：

- 请求路径可能不匹配实际存在的文件位置。
- 如果涉及跨域加载，则需考虑目标站点是否允许来自当前源站的访问。

对于同一顶级域名下的子域名间通信问题，可以利用 `document.domain` 来实现一定程度上的跨域交互[^1]。然而这并不适用于解决因路径错误引起的 404 报错情况。

### 解决方案

#### 方法一：确认并修正URL地址

确保所提供的链接指向的是有效的网页地址，并且该地址能够被正常解析和返回预期的内容。检查是否存在拼写错误或是相对路径设置失误等问题。

#### 方法二：调整路由模式 (针对单页应用)

如果是 SPA（Single Page Application），比如基于 Vue Router 构建的应用程序，默认情况下可能会采用 HTML5 History 模式的路由机制，在这种情形下浏览器会尝试直接向服务器发起 GET 请求来获取指定路径对应的静态资源。此时应确保 Web Server 配置支持前端路由重定向功能，即无论用户输入什么 URL 地址都会最终导向到 index.html 文件上交由前端框架处理。

例如 Nginx 可以通过如下配置实现此目的:

location / {
    try_files $uri $uri/ /index.html;
}

而对于 Apache 则可参照以下 .htaccess 设置:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

以上两种方法都可以有效防止由于找不到对应物理文件而产生的 404 错误现象发生。

#### 方法三：动态创建 iframe 并延迟加载

为了避免过早触发网络请求而导致失败的情况，可以在组件挂载之后再异步地构建 `iframe` 元素及其属性值。这样做的好处是可以更好地控制何时以及如何加载远程内容。

export default {
  mounted() {
    const ifr = document.createElement('iframe');
    ifr.src = 'https://example.com/target-page';
    ifr.onload = () => {
      console.log('Iframe loaded successfully.');
    };
    ifr.onerror = error => {
      console.error(`Failed to load iframe: ${error}`);
    };
    this.$refs.container.appendChild(ifr);
  }
};

此外还可以结合 Vuex 或者其他状态管理工具监听某些特定条件满足后再执行上述逻辑，从而进一步提高用户体验度。