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("フォーム");

次に、配列をループして、タグが表示されているかどうかを確認できます。

于 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 に答える