3

関数が現在のテキスト/フォーマットを非表示にしないようにする方法があるかどうか疑問に思っていました。

<body>
<script type="text/javascript">
document.body.style.backgroundColor = "#F5F0EB";
var page = 0
function flip(){
document.write(page);
page++;
}
</script>
<input type=button value="Next" onClick="flip()">
</body>

ボタンを押すと、色付きの背景が失われ、テキストが表示されます。背景をそのままにしてテキストを表示する方法はありますか?

4

4 に答える 4

3

はい、使用しませんdocument.write()。MDN はそれを明確に説明しています:

document.open() を呼び出さずに既にロードされているドキュメントに書き込むと、自動的に document.open 呼び出しが実行されます。

そしてそれについてdocument.open() 言う：

ドキュメントがターゲットに存在する場合、このメソッドはそれをクリアします。

あなたがすべきことは、DOM でノードを操作することです。たとえば、本文の内部 HTML を次のように変更できます。

document.body.innerHTML += page;

または、テキスト ノードを作成して追加することもできます。

var textNode = document.createTextNode(page);
document.body.appendChild(textNode);

どちらの場合も、現在のドキュメントはフラッシュされず、変更されるだけです。

于 2013-02-03T00:19:21.907 に答える
1

これは、html であるはずのドキュメントに非 html を書き込んでいるために発生しています。他の人が示しているように、既存の html もクリアされている可能性があります。を使用する代わりにdocument.write、ドキュメントに新しい要素を追加したい場合があります。

document.createElement関数と関数を使用してそれを行うことができますdocument.appendChild。

Google で簡単に検索すると、次のような結果が返ってきました。

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

于 2013-02-03T00:18:45.350 に答える
0

Mattias Buelens が説明したように、ロード後にメソッドが自動的に呼び出されるため、DOM をクリアするメソッドをdocument.write呼び出します。もちろん、使用できる代替手段はいくつかあります。たとえば、要素の属性を 使用します。andの 使用もオプションですopendocument.close
innerHTMLbody
document.createElementdocument.body.appendChild

しかし、どちらの方法にも欠点があることを考慮する価値があるでしょう。使用innerHTMLすると、不適切な形式のマークアップを DOM に挿入でき、XSS 攻撃に対して脆弱になる可能性があります。
を使用するdocument.createElementと (一般的に) 遅くなり、多くの場合、より多くのコードが必要になるため、スクリプトの保守性が低下します。

次のようなものを使用できます。

var flip = (function(tempDiv)
{//create a div once
    var page = 0,
    targetDiv = document.getElementById('contentgoeshere');//closure variables
    //page is now no longer an evil global, and the target element into which
    //we will inject new data is referenced, so we don't have to scan the DOM
    //on each function call
    return function(overridePage)//optional argument, just in case
    {//actual flip function is returned here
        overridePage = overridePage || page++;//new content
        tempDiv.innerHTML = overridePage;//render in div that isn't part of the DOM
        //any number of checks can go here, like:
        if (tempDiv.getElementsByTagName('script').length > 0)
        {
            alert('Naughty client, trying to inject your own scripts to my site');
            return;
        }
        targetDiv.innerHTML = tempDiv.innerHTML;
        //or, depending on your needs:
        targetDiv.innerHTML = tempDiv.innerText;//or the other way 'round
    };
}(document.createElement('div')));

いくつかの補足事項: 現状では、クロージャーが機能するには DOM を完全にロードする必要があるため、この関数は機能しません。簡単な修正は次のとおりです。

var flip;//undefined
window.onload = function()
{
    flip = (function(tempDiv)
    {
        var page = 0,
        targetDiv = document.getElementById('contentgoeshere');
        return function(e)
        {
            tempDiv.innerHTML = e instanceof Event ? page++ : (e || page++);//ternary + logical or
            //your [optional] checks here
            targetDiv.innerHTML = tempDiv.innerHTML;
            if (e instanceof Event)
            {//this part is optional, but look it up if you want to: it's good stuff
                e.returnValue = false;
                e.cancelBubble = true;
                if (e.preventDefault)
                {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
            return e;
        };
    }(document.createElement('div')));
    //instead of using the HTML onclick attribute:
    document.getElementById('buttonID').onclick = flip;//use as event handler
};

window.onloadIE<9 でメモリ リークが発生することに注意してください。この問題の解決策については、このリンクを確認してください。

于 2013-02-03T00:42:20.513 に答える
0

HTML全体を上書きするドキュメントにページを書き込んでいます。代わりに、コンテンツを DIV に書き出します。

これにより、背景色の問題も修正されるはずです。

これは、例を含むJS Fiddleです。

<script type="text/javascript">
document.body.style.backgroundColor = "#F5F0EB";
var page = 0
function flip(){
document.getElementById("contentgoeshere").innerHTML=page;
page++;
}
</script>
<input type=button value="Next" onClick="flip()">
<div id="contentgoeshere">
</div>

幸運を。

于 2013-02-03T00:16:34.840 に答える