javascript - 检测表单是否可见

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

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

最佳答案

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：弹出窗口

我已经为弹出窗口改编了我的示例，但是我不得不说，您不能处理来自其他主机的文档中的元素-弹出窗口和打开器窗口都应属于同一主机。

<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>

关于javascript - 检测表单是否可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12406828/