javascript - js コンソールの ReferenceError -SCRIPT5009: 'channel_click' は定義されていません

Question

js コンソール内の IE9 で「SCRIPT5009: 'channel_click' is undefined」エラーが発生します。コードは chrome と firefox で動作しますが、リンクをクリックして IE9 で js シーケンスを開始すると突然停止しました。

私はこれを理解しようとしましたが成功しませんでしたが、私が行ったことは一連のイベントが発生するタイミングを計ることでした:

1) onclick - toggle div to hide
2) wait 1500 
3) open print command
- User closes the window to return to page
4) wait 3500 toggle div to show again

私がこれを行う理由は、ユーザーがページを印刷することを決定したときに、印刷プレビューでこれらの一連の div を取得したくないからです。

Javascript:

<script>
//WAITS UNTIL EXCESS IS HIDDEN THEN FIRES PRINT COMMAND 
function channel_click(){

// anon wrapper function, 2 second delay
setTimeout( function () {
window.print();return false;
} , 1500 );

}
</script>


<script>
//HIDES EXCESS IN PREP FOR FIRING PRINT COMMAND PREVIOUS FUNCTION EXECUTES IN BETWEEN FOLLOWING FUNCTIONS
$(".hideshow").click(function () {
$("#header,#footer").toggle("slow");

setTimeout( function () {
$("#header,#footer").toggle("slow");
} , 3500 );
$('.modal-backdrop').hide();
});
</script>

HTML:

<a href="#" role="button" class="hideshow" onclick="channel_click()">Print Preview</a>

<div id="header">
    <div class="pull-left">
    <h1>Edt Mode</h1>
    <h6 style="padding-bottom: 30px;">Some informational text here</h6>
</div>

<div>
    <div class="pull-left">
    <h1>PRINT ME!</h1>
    <h6 style="padding-bottom: 30px;">PRINT ME -  PRINT ME - PRINT ME</h6>
</div>

<div id="footer">
    <div class="pull-left">
    <h1>Edt Mode</h1>
    <h6 style="padding-bottom: 30px;">Some informational text here</h6>
</div>

<div class="model-backdrop">wow this is some more text</div>

Answer 1

その中、あなたのhtmlは整形式ではなく、そこに何か問題は見られません。多分あなたは私たちに完全なマークアップを提供することができますか？

Answer 2

HTMLで使用する前にJavaScriptファイルをロードしますか? そうすれば問題はありませんが、html ファイルの最後にある .js ファイルにリンクしようとしない場合は問題ありません。

これを必須にしたくない場合は、channel_click を window.onload 内にラップするか、jQuery を使用する場合

$(document).ready(function() {
    function channel_click() {
        ....
    }
})

Answer 3

アンカータグから onclick を削除してみてください:

<a href="#" role="button" class="hideshow">Print Preview</a>

JS:

<script type="text/javascript">
function channel_click(){    
    // anon wrapper function, 2 second delay
    setTimeout( function () {
         window.print();return false;
     } , 1500 );    
 }

    $(document).ready(function() {  //add this
        $(".hideshow").click(function (e) {
            e.preventDefault();
            $("#header,#footer").toggle("slow");
            channel_click(); //call print

           setTimeout( function () {
              $("#header,#footer").toggle("slow");
           } , 3500 );
           $('.modal-backdrop').hide();
         });
    });

Answer 4

ここでは、期待どおりに機能しています

http://jsbin.com/imimom/2