iframe注入

上一篇已经介绍过了如何在 iframe 注入 js 文件, 重点是在 manifest.json 的 content_scripts 每个匹配项最后加上 "all_frames":true

    "content_scripts": [
            // "matches": ["*://*.taobao.com/*"],
            "matches": ["<all_urls>"],
            "js": ["jquery-3.4.1.min.js", "content_scripts.js"],
            "run_at": "document_end"
        }, {
            "matches": ["*://*.iframe_src.com/*"],
            "js": ["jquery-3.4.1.min.js", "content_scripts.js"],
            "run_at": "document_end",
            "all_frames":true
也就是说, 我们可以为每一个有需要的 iframe 都注入特定的 js, 来完成特定的工作
iframe嵌套情况
例如有下面 iframe 嵌套的情况: 页面之间还有交互操作, 那么用什么方式来处理最合适呢?
  top : 最外层页面
      
list : 详情页面
          
filter : 筛选页面
              document.querySelector("input")  返回找到的第一个元素
              document.querySelectorAll("input") 返回 NodeList 数组
          在 iframe 获取父级页面的 document 可以使用: window.parent.document
      用 jquery 操作
          
获取 iframe 的 jquery 实例: var $iframe = $("#iframeId").contents();
          获取 iframe 的元素: $iframe.find("#name")
          获取 iframe 获取父级页面的元素: $("#msg_top", window.parent.document)
  Get IFrame’s document, from JavaScript in main document
  jQuery/JavaScript: accessing contents of an iframe
  how to access iFrame parent page using jquery?