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

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

我制作了一个连接到 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 标签和我的自定义菜单的代码。

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

window.parent.document.getElementById()

window.top.document.getElementById()

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

希望对你有所帮助

此致

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

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

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

  • getElementsByClassName
  • getElementsByTagName
  • getElementsByTagNameNS