Question

我有这种情况，我正在检测网站上的所有表单：document.forms

我正在尝试检测哪些表格可见，哪些表格不可见。

var formElement = []
for (i=0,l=document.forms.length;i<l;i++){
   var formIndex = document.forms.item(i);
   if (<need here just visible forms>){
       formElement.push(formIndex);
  }
}

只是说我正在通过其他弹出窗口与浏览器窗口进行通信，这取决于主机站点上存在jQuery，因此jQuery不是解决方案。

最好的方法是什么。

Answer 1

var isVisible = form.style.display != 'none';

更新＃1：hidden属性

如果指定了hidden属性，则该元素也是不可见的，因此条件可以改为

var isVisible = form.style.display != 'none' && !form.hasAttribute('hidden');

更新＃2：jQuery方法：

找到所有不可见的形式：

$('form:hidden'); 要么 $('form:not(:visible)');

查找所有可见的表单：

$('form:visible');

检查表格可见：

$(form).is(':visible');

更新＃3：特殊情况（有问题的原始代码）

使用我的演示中的函数确定可见表单非常有用：

function isVisible(el) {
    return el.style.display != 'none' && !el.hidden;
}

var formElement = [];
for (i=0, l=document.forms.length; i<l; i++) {
    var formIndex = document.forms.item(i);
    if(isVisible(formIndex)) {
        formElement.push(formIndex);
    }
}
console.log(formElement);

演示中的这个循环是相同的循环：

for(var i = document.forms.length; 0 < i--;) {
    log('Form #' + i + ': ' + isVisible(document.forms[i]));
}

<强> DEMO

更新＃4：弹出窗口

我已经调整了我的弹出窗口示例，但我必须说你 NOT ABLE 来处理来自其他主机的文档中的元素 - 两个弹出窗口和开启窗口应属于同一主机。

<script type="text/javascript">
    var wnd = window.open('popup.html');

    function isVisible(el) {
        return el.style.display != 'none' && !el.hidden;
    }
    wnd.onload = function() {
        /* This is working pretty well: */
        var formElement = [];
        console.log(wnd.document.forms);
        for (i=0,l=wnd.document.forms.length;i<l;i++){
           var formIndex = wnd.document.forms.item(i);
           console.log(formIndex);
           if (isVisible(formIndex)){
               formElement.push(formIndex);
               console.log('Form ' + formIndex.id + ' is visible');
          }
        }
    };
</script>

Answer 2

var forms = document.getElementsByTagName（“form”）;

然后，您可以遍历数组并检查标记是否可见。

Answer 3

您可以使用：

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]

参考。 How do I check if an element is hidden in jQuery?

Answer 4

你可以使用：

$('#form').is(':visible')

Answer 5

以下将介绍所有表格，并说明哪些表格可见，哪些表格不可见：

$("form").each(function() {
   if ($(this).is(":visible")) {
       console.log("Visible: ", this);
   } else {
       console.log("Hidden: ", this);
   }
});

或者如果你想一次得到所有可见的那些：

$("form:visible")

隐藏的那些：

$("form:hidden")

检测表单是否可见

5 个答案: