Question

我的索引页面上有这段代码片段，基于本教程：https://blog.kulturbanause.de/2012/12/inhalte-per-ajax-jquery-nachladen/ 但需要的是，＆＃34; source.php＆＃34;加载代码段中的代码后立即自动加载，同时显示index.php的内容。我尝试使用设置的TimeOut函数，但是没有成功。如何修改功能？

    <body  id="body">
        <div id="target"><!DOCTYPE HTML>
            <div id="Ladeanimation">
                <img id="Ladeanimation-1" src="pics/favicon.ico" alt="Webseitenlogo">
                <input type="radio" name="color" id="box" checked /><label for="box"></label>
                <ul class="Ladepunkte">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
                <p id="Ladeanimation-2">
                    Diese Webseite nutzt JavaScript. Bitte aktiviere JavaScript in deinem Browser, um zur Webseite zu gelangen.
                </p>
            </div>
            <script>
                (function($) {
                    setTimeout(function() {
                    $("#Ladeanimation").fadeOut(500);
                    }, 7500);
                    })(jQuery);
            </script>



                <div id="Warnmeldung" class="foo">
                    <p id="Warnmeldung-1">
                        Versetze dein Gerät, oder dessen Viewport, bitte in ein Breitbildformat. 
                    </p>
                    <p id="Warnmeldung-2">
                        (mindestens 5:4/maximal 22,5:9) 
                    </p>

                </div>
                <script>
                    document.addEventListener("DOMContentLoaded", checkDimensions);
                    window.addEventListener('resize', checkDimensions);
                    function checkDimensions() {
                            // http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript
                            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                            var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
                      var ratio = w/h;
                      // console.log(ratio); // check your browser console

                      if (ratio >= 1.25 & ratio <= 2.5) {
                            // fade out
                        document.querySelector('.foo').style.zIndex = -500;
                        document.querySelector('.foo').fadeOut(500);
                      }
                      else {
                            // fade in
                        document.querySelector('.foo').style.zIndex = 500;
                      }
                    }
                </script>



            <div id="Hintergrundfarbe">

            </div>
        </div>
        <p>

          <button onclick="kb_source_2_target()">Hier klicken</button>
        </p>
        <script src="jquery.js" type="text/javascript"></script> 
        <script>
            function kb_source_2_target() {
                $.get('source.php', function(data) {
                    $('#target').html(data);    
                })
            }
        </script>**strong text**
        <script src="shariff.min.js"></script>
    </body>
</html>

Answer 1

只需在脚本中调用它;）

<script>

    function kb_source_2_target() {
        $.get('source.php', function(data) {
            $('#target').html(data);    
        })
    }

    kb_source_2_target();

</script>

不要直接在html中编写你的javascript。将所有JavaScript代码移动到另一个文件，并将其包含在html页面的底部。

<script src="main.js"></script>

也许这有帮助...

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="jquery"></script>
    <script src="yourfile"></script>
  </body>
</html>

AJAX Autoreload而不是onclick，怎么样？

1 个答案: