Question

我制作了一个脚本，该脚本连接到WP视频插件并在其上生成一个浮动菜单。该脚本在WP页面中可以正常工作，但是当我使用插件SHARE＆EMBED函数生成指向我的视频的链接（该视频用于将其合并到另一个页面结构中）时，该脚本不起作用。将嵌入到外部网页时，我的自定义Js脚本不起作用。最好说这是可行的，因为我的js和css文件已连接到新页面的头部，并且菜单位于页面结构内部，但由插件生成的新div元素覆盖了。

我使用的WordPress视频插件会生成一个iframe代码。当我在开发人员模式下检查将链接嵌入到视频的页面时，我看到标记被放置在页面标签外部的标签内。当我尝试使用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()

OR

window.top.document.getElementById()

也许，您可以使用它访问此元素。

我希望这对您有所帮助。

致谢

Answer 2

您正在document中选择document属性。该属性不存在。

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

也许您试图获取<html>标签，它是documentElement中的document属性。 documentElement只有三种选择元素的方法。

getElementsByClassName
getElementsByTagName
getElementsByTagNameNS

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

2 个答案: