如何在外部主体标签中添加元素并排除 iframe 主体标签

Question

我尝试通过 Tampermonkey 向网站添加按钮。该按钮应该只出现在外部主体中，而不应该出现在 iframe 中。

例如，这是在 Tampermokey 运行之前...

<html>
  <head>...</head>
  <body>
    ...
    ...
    <iframe src="https://xyz.abc", id="myID">
      <html>
        <head>...</head>
        <body>
          ...
          ...
        </body>
      </html>
    </iframe>
  </body>
</html

我尝试添加这样的按钮：

var zNode = document.createElement('div');
            zNode.innerHTML = '<button id="myButton" type="button">' +
                'submit</button>';
            zNode.setAttribute('id', 'myContainer');
var first = document.getElementsByTagName('body')[0];
            first.appendChild(zNode);
            
// add an event handler, etc...

但是这段代码并没有忽略 iframe 中的 body 标签，我的按钮出现在两个 body 标签中。

<html>
  <head>...</head>
  <body>
    <div id="myContainer"><button id="myButton" 
      type="button">Clear Session</button></div>
    ...
    <iframe src="https://xyz.abc", id="myID">
      <html>
        <head>...</head>
        <body>
          <div id="myContainer"><button id="myButton" 
            type="button">Clear Session</button></div>
          ...
        </body>
      </html>
    </iframe>
  </body>
</html

我想要存档的是仅在外部主体中添加按钮（而不是作为 iFrame 的一部分）。请注意，我无法修改网页，我只能尝试通过 Tampermonkey 调整我的代码... 你能在这里支持我吗？谢谢

Answer 1

更新 2

如果页面是动态生成的，内容各不相同，and/or无法控制加载内容和加载方式等，请尝试使用 .insertAdjacentHTML() 方法添加按钮。向 body 添加元素也不是最佳位置选择，因为它位于 HTML 层次结构的顶部，那里应该只有很少的元素。

const win = document.querySelector('iframe');

win.insertAdjacentHTML('beforebegin', `<div class="box">
  <button class='clr'>
    Clear Session
  </button>
</div>`);

<iframe srcdoc="<html><head></head><body>There's no button in this iFrame.</body></html>" width='200' height='100' frameborder='2'></iframe>

更新 1

使用.class代替#id。

关于 HTML 的基本规则是属性 #id 的规则。 #ids 在页面上必须是唯一的，这意味着它是无效的 HTML 如果有多个元素分配为例如 #myContainer。在正常情况下应该有多个 #id，.querySelector() 或 .getElementById() 等方法将找到第一个元素并忽略任何其他重复项，因为它假定只有一个 #myContainer.

iFrame HTML无效

在 OP 代码中有一个不寻常的布局，其中有两个 #myContainer 并且它们位于不同的文档中，这无意中使它们都有效。但是 OP 代码无效，因为 iFrame 语法非常错误：
- OP 无效HTML（iFrame 只是一个内联元素）
```
<iframe><html><body>...</body></html></iframe>
```
- 有效HTML（iFramesrc属性是一个url的页面）
```
<iframe src='https://sub.dom.com/path/to/page.html'></iframe>
```
- 有效 HTML（iFrame 源是 srcdoc 属性的 htmlString）
```
<iframe srcdoc='<html><body>...</body></html>'></iframe>
```
如果 iFrame 有效，则 iFrame 中的所有内容都不会受到影响，除非：
- 同一主机上存在内容
- 使用.contentDocument属性
操作码有一个无效的 iFrame，它只是一个没有特殊功能的内联元素。

使用.querySelector()

方法.getElementsByTagName('body')[0]实际上收集了所有body元素和值为零的括号符号：[0]表示文档中的第一个body，因此两者body 受到影响。

使用 F12 检查 HTML 并确保 zNode（假设 zNode 是一个元素）附加到 iframe。从发布的少量代码来看，您似乎无法向 iframe 添加任何内容，因为需要额外的属性：

document.querySelector('iframe').contentDocument;

在下面的示例中，以下内容用于引用父文档的正文：

document.body

const mark = document.createElement('mark');
mark.textContent = 'This is in body of parent document';
document.body.appendChild(mark);

<iframe srcdoc="<!DOCTYPE html><html><head></head><body><p>Inside iFrame</body></html>" style='display: block; width: 50vw; height: 25vh; border: 3px inset grey; margin: 10px auto'></iframe>

如何在外部主体标签中添加元素并排除 iframe 主体标签

how to add an element in the outer body tag and exclude iframe body tags

javascript

dom

tampermonkey