1

我有这种情况，我正在检测网站上的所有表单：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 不是解决方案。

做这个的最好方式是什么。

4

5 回答 5

3

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]));
}

演示

更新#4：弹出窗口

我已经为弹出窗口调整了我的示例，但我不得不说你无法处理来自其他主机的文档中的元素 -弹出窗口和打开窗口都应该属于同一个主机。

<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>
于 2012-09-13T12:59:07.263 回答
1

var forms = document.getElementsByTagName("form");

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

于 2012-09-13T12:59:55.027 回答
0

你可以使用这个：

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

参考。 如何检查元素是否隐藏在 jQuery 中？

于 2012-09-13T12:59:53.467 回答
0

您可以使用 ：

$('#form').is(':visible')
于 2012-09-13T13:00:25.307 回答
0

以下将遍历所有表单，并说明哪些是可见的，哪些是不可见的：

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

或者如果您想一次获得所有可见的：

$("form:visible")

还有那些隐藏的：

$("form:hidden")
于 2012-09-13T13:00:45.947 回答