主页 / coding / 问题 / 76979210
Accepted
Danielle
Asked: 2023-08-26 01:01:34 +0800 CST

Chrome 扩展：注入页面的 iframe 返回 null

  • 772

我有一个 Chrome 扩展，它加载一个带有一些按钮的 iframe，我想用脚本控制这些按钮的功能。iframe 已注入并正在工作。当用户单击关闭图标时，我希望关闭 iframe。

以下是相关文件：content.js

  // Check if the iframe has not been injected already
  if (!document.getElementById('extension-iframe')) {
    const iframe = document.createElement('iframe');
    iframe.id = 'extension-iframe';
    iframe.src = chrome.runtime.getURL('iframe_content.html');

    document.body.appendChild(iframe);
  }
}

扩展_bar.js

document.addEventListener('DOMContentLoaded', function () {
  const closeIcon = document.getElementById('close-icon');
  console.log('Close icon element:', closeIcon);

  closeIcon.addEventListener('click', () => {
    console.log('Close icon clicked');
    const iframe = document.getElementById('extension-iframe');
    console.log('Iframe element:', iframe);
    if (iframe) {
      iframe.remove();
      console.log('Iframe removed');
    }
  });
});

iframe_content.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="extension_bar.css">
</head>
<body class="extension-body">
    <header class="extension-header">
      <div class="extension-logo">Your Logo</div>
      <div class="extension-icons">
        <img id="setting-icon" src="images/settings-icon.png" alt="Settings">
        <img id="close-icon" src="images/close-icon.png" alt="Close">
      </div>
    </header>
    <p id="extension-message">...</p>
  <script src="extension_bar.js"></script>
</body>
</html>

但是，我无法使用 document.getElementById() 访问 iframe，并且在尝试调试时，控制台返回 iram element:null。所有其他元素都在工作。

google-chrome

1 个回答

  1. Best Answer

    iframe 的内部内容是一个单独的不同环境，因此其内部脚本 (extension_bar.js) 在不同的文档内运行。它无法使用元素访问外部文档，iframe因为文档是跨源的。

    要删除 iframe，您需要在 content.js 的父文档中执行此操作：

    // iframe script: extension_bar.js
closeIcon.addEventListener('click', () => {
  chrome.tabs.getCurrent(tab => {
    chrome.tabs.sendMessage(tab.id, 'remove-iframe');
  });
});

    // content script
chrome.runtime.onMessage.addListener(msg => {
  if (msg === 'remove-iframe') {
    const src = chrome.runtime.getURL('iframe_content.html');
    const el = document.querySelector(`iframe[src="${src}"]`);
    el?.remove();
  }
});
    • 0

相关问题