我有一个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);
}
}extension_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，并且在尝试调试时，控制台返回iframelement：null。所有其他元素都在工作。
1条答案
按热度按时间anhgbhbe1#
iframe的内部内容是一个独立的不同环境，因此其内部脚本（extension_bar.js）在不同的文档中运行。它不能访问带有
iframe元素的外部文档，因为这些文档是跨域的。要删除iframe，你需要在content.js的父文档中进行：