If...Else：如果 iFrame 存在，应用 CSS 到页面？

Question

我是新来的。对编程、标记、网络开发非常陌生。我对 HTML 和 CSS 有一些基本的了解，但这是我第一次尝试使用 jQuery/Javascript.

是否可以使用 jQuery（或其他方式）来

1- 检测带有 class="iframe1" 的 iframe 是否出现在给定页面上并且

2- 如果它确实存在，删除带有 id="main-header" 的主导航栏？

我目前正在使用此自定义 CSS 全局隐藏导航：

#main-header {
display:none !important;
}

然后使用这个（例如）在各个页面上替换它：

.page-id-1350 #main-header {
display:block !important;
}

显然这并不理想，我非常喜欢自动化这个过程。

非常感谢，

克里斯

Answer 1

您可以使用以下 jQuery 代码来做到这一点：

if($(".iframe1").length > 0) // If .iframe1 exists
    $("#main-header").hide(); // Hide #main-header

或者，反其道而行之，保留隐藏 #main-header 的 CSS，然后在 .frame1 不在页面上时显示它：

if($(".iframe1").length == 0) // If .iframe1 does not exists
    $("#main-header").show(); // Show #main-header

Answer 2

您可以使用 JavaScript 执行此操作，代码如下：

<script>
// Place this at the end of the body
window.addEventListener("load", function(){
    var iframeTest = document.querySelectorAll("iframe.iframe1");
    var navBar = document.getElementById("main-header");
    if (iframeTest.length > 0) {
        navBar.setAttribute("style","display:none");
    }
});
</script>

If...Else：如果 iFrame 存在，应用 CSS 到页面？

If...Else: If iFrame exists, apply CSS to page?

javascript

css

iframe

jquery

header