JavaScript 问题解决 —— 父子 iframe 互相调用 DOM 元素 / 方法、tomcat / nginx 运行静态项目

目录

一.静态页面介绍

二.文件目录介绍

三.需求介绍

四.代码实现

4.1 regulatory-focus/c.html：右侧栏表格页面

4.2 regulatory-focus-pop.html：弹框页面

4.3 index.html：主页面

五.注意事项 

---

一.静态页面介绍

• 点击左侧菜单，会切换右边侧边栏内容
• 左侧边栏是用 main.js 动态渲染的
• 右边侧边栏对应一个个 iframe，用 main.js 动态渲染
• 

二.文件目录介绍

• 

三.需求介绍

•  点击表格中的定位按钮，在主页中间显示弹框，点击弹框右上角的关闭按钮，隐藏弹框
• 我疑惑的地方：右侧栏是 iframe 嵌入的，主页中没有右侧栏 iframe 中的元素，右侧栏 iframe 也没有弹框 iframe 中的 × 元素，如何实现 iframe 间的交互呢？ 

 

• 右侧栏表格定位按钮在：regulatory-focus/c.html
• 弹框页面（ × 关闭按钮）在：regulatory-focus/regulatory-focus-pop.html
• 主页在：index.html

四.代码实现

4.1 regulatory-focus/c.html：右侧栏表格页面

• regulatory-focus-location：右侧栏表格页面中的 定位按钮
• pop-focus-location：右侧栏表格页面中的 包裹弹框页面的 div 盒子
• 右侧栏表格页面（子 iframe）中，书写 主页（父html）获取 右侧栏表格页面（子 iframe）元素：
• （子 iframe 操作 父 html）parent.document.getElementById("pop-focus-location") // 父html 获取 子iframe 中的 包裹 弹框iframe 的 div盒子

// 包裹弹框的div
<div id="pop-focus-location" style="display: none;">
    <iframe src="./regulatory-focus-pop.html"></iframe>
</div>

    <script>
      // 子 iframe 操作 父 html
      // 点击子页中的定位按钮后，获取主页中的 包裹弹框的 div，把他展现出来
      $(".regulatory-focus-location").click(function () { 
        // 在子页面中书写：父获取子中的 包裹弹框的 div
        var popEl = parent.document.getElementById("pop-focus-location")
        // 点击后盒子展现
        popEl.style.display = 'block';
      });

4.2 regulatory-focus-pop.html：弹框页面

• pupclose：弹框页面关闭按钮

      $('.pupclose').click(function(){
        // 示例2: 子 iframe 操作 父 html
        var popEl = parent.document.getElementById("pop-focus-location")
        popEl.style.display = 'none';
      })

4.3 index.html：主页面

• btnTest：父页面按钮
• regulatory-focus-c（子 iframe ID）：右侧栏表格页面本身 作为 iframe 时，它的 ID
• regulatory-focus-location（子 iframe 元素）：右侧栏表格页面中的 定位按钮
• pop-focus-location（子 iframe 元素）：右侧栏表格页面中的 包裹弹框div
• （父 html 操作 子 iframe）当某个子 iframe 加载后，调用此方法，绑定子 iframe 监听：
•         $("子 iframe ID").contents().find("子 iframe 中的元素").click(function() {
            $("子 iframe 中的元素").css('display', 'block')
          });

  <div id="btnTest" class="btn-test"> 设置 iframe 监听 </div>
    <script>
      // 示例1: 父 html 操作子 iframe
      $("#btnTest").click(function() {
        // 当某个子 iframe 加载后,调用这个方法,绑定子 iframe 监听
        // 寻找指定id的 iframe 内容中的 某个元素，并进行操作
        $("#regulatory-focus-c").contents().find(".regulatory-focus-location").click(function() {
          $("#pop-focus-location").css('display', 'block')
        });
      })
    </script>

五.注意事项 

• 除了顶层元素，其他元素尽量不要使用 id
• 这种 嵌套 iframe，必须放在 服务器环境 下，如果直接在浏览器打开，使用的是 file://协议，iframe 之间调用会报 跨域相关 的错误
• 开发调试的时候，找个服务器托管，比如放在 nginx / tomcat 下
• nginx：

1. 静态项目放置位置：
2. 定义解析：

• tomcat：

1. 静态项目放置位置：
2. 必须将 src 中的目录放在最外层，否则会找不到入口文件：
3. 启动 tomcat：