如何访问 <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
我制作了一个连接到 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