Firefox 和 Chrome - iframe 的不同行为

Posted 2023-05-09

【中文标题】Firefox 和 Chrome - iframe 的不同行为

【英文标题】：Firefox & Chrome - different behavior for iframe

【发布时间】：2016-02-09 15:31:50

【问题描述】：

我在我的网站上添加了一个 youtube 视频（例如 <iframe width="640" height="360" src="https://www.youtube.com/embed/QE5KOfjKLy0" frameborder="0" allowfullscreen></iframe>）

使用 Firefox 的扩展程序，我可以获取 youtube 嵌入的网址 视频当我中键点击视频的标题或“youtube 按钮”（见下面的截图）。

我不知道为什么，但它可以工作，我可以在“浏览器控制台”中看到视频的 url（对于 Firefox，ctrl+shift+j）。

但是 Chromium-browsers 有不同的行为，它只适用于当前页面上的简单 url (<a href="...">...</a>)，而不是来自 iframe 的 url。

如果 Chrome 也能做到这一点，那就太好了。

有人知道为什么 Firefox 和 Chrome 会有所不同吗？

此处的内容脚本（用于 Firefox 和 Chromium）：

(function (undefined) 
    'use strict';
    var YoutubeExtActions = 
        linkClickListener : function(e) 
            if(e.button === 1) 
                var link = $(e.target).closest('a');    
                if(link.length && link.attr('href') !== '#') 
                    var url = link[0].href;
                    if(url.match(/youtube.com\/watch/i) || url.match(/youtube.com\/embed/i)) 
                        e.preventDefault();
                        e.stopPropagation();
                        console.log("you got it: " + url);
                    
                
            
        
    
window.addEventListener("click",YoutubeExtActions.linkClickListener,false);
)();

Chrome 中的 JS 仅适用于常见链接（不适用于 iframe）

manifest.json：

   "content_scripts": [ 
      "js": [ "jquery-1.11.3.min.js", "content_script.js" ],
      "matches": [ "<all_urls>" ],
      "run_at": "document_idle"
    ],
   "description": "chromium youtube iframe get url",
   "manifest_version": 2,
   "name": "chromium youtube iframe get url",
   "version": "1.0"

【参考方案1】：

为了在 iframe 中自动插入内容脚本，请在 manifest.json 中添加 "all_frames": true：

"content_scripts": [ 
  "js": .................,
  "matches": .................,
  "all_frames": true
 ],

文档：

Content scripts Debugger - 这个工具非常有用。