如何访问 <body> 标签外的 <div> 元素？

Question

我制作了一个连接到 WP 视频插件并在其上生成浮动菜单的脚本。该脚本在 WP 页面内运行良好，但当我使用插件 SHARE&EMBED 功能时它不起作用，它会为我的视频生成一个 link，用于将其合并到另一个页面结构中。当嵌入外部网页时，我的自定义 Js 脚本不起作用。更好的说法是它有效，因为我的 js 和 css 文件连接到新页面的头部，菜单出现在页面结构内，但它被生成的新 div 元素覆盖插件。

我使用的 WordPress 视频插件生成一个 iframe 标签。当我检查将 link 嵌入视频的页面时，在开发人员模式下，我看到它被放置在页面标签之外的标签内。当我尝试使用 document.getElementsByTagName("iframe") 或通过其 ID 访问 Iframe 标记时，我收到一条错误消息，指出该元素不存在。我尝试使用 "document.addEventListener('DOMContentLoaded',..." 和 "if(window.fwduvpPlayer0)..."，但我仍然无法使用我的视频访问标签。

document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
    generateMainMenuButton1();``
    if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
        shareAndEmbed();
    }
});


document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
    generateMainMenuButton1();``
    if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
        shareAndEmbed();
    }
});

function shareAndEmbed() {
    let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");

   getIFrameDiv.insertAdjacentHTML("beforebegin",
        `<div class="show-menu top-left" id="menuBtnDiv1">
             <button class="btn btn-sm" id="menuBtn" onclick="videoOverlayMenuGenerator1()">
             <span class="iconify" data-icon="whh:menu" data-inline="false"></span><span class="menu-button-title"> MENU emb</span>
             </button>
             </div>`
    );

我的想法是，我希望我的脚本通过它的 ID 访问 iFrame 标签，并在它之前包含 div 标签和我的自定义菜单的代码。

Answer 1

为了访问不在标签中的元素，您可以尝试使用这个选项：

window.parent.document.getElementById()

或

window.top.document.getElementById()

也许，有了这个你就可以访问这些元素了。

希望对你有所帮助

此致

Answer 2

您正在 selectdocument 属性 document。那个属性不存在。

let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");

也许您试图获取 <html> 标签，即 document 中的 documentElement 属性。 documentElement 对 select 个元素只有三种方法。

getElementsByClassName
getElementsByTagName
getElementsByTagNameNS

如何访问 <body> 标签外的 <div> 元素？

How to access <div> elements outside the <body> tag?

wordpress

custom-wordpress-pages