У меня есть следующий рабочий пример приложения, которое отображает ввод текста в окне терминала:

Шаг 1 - рабочий образец, у которого нет проблем (3 файла в одной папке: index.php, style.css и typed-custom.js)

У меня есть следующие материалы для style.css:

 .terminal-window {
  text-align: left;
  width: 620px;
  height: 650px;
  border-radius: 10px;
  margin: auto;
  position: relative;
}

.terminal-window section.terminal {
  color: white;
  font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
  font-size: 11pt;
  background: black;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 0;
  overflow: auto;
}
.term-home{color: #0095ff;}

У меня есть следующий контент для typed-custom.js

$(function() {
  var data = [

  {
    action: 'type',
    strings: ["typing-1:"],
    output: '<span class="green"><small> This is first typing</small></span>&nbsp;',
    postDelay: 1000,
  },

  {
    action: 'type',
    strings: ["typing-2:"],
    output: '<span class="green"><small>This is second typing</small></span>&nbsp;',
    postDelay: 1000
  },

  ];
  runScripts(data, 0);
});

function runScripts(data, pos) {
    var prompt = $('.prompt'),
        script = data[pos];
    if(script.clear === true) {
      $('.history').html('');
    }
    switch(script.action) {
        case 'type':
          // cleanup for next execution
          prompt.removeData();
          $('.typed-cursor').text('');
          prompt.typed({
            strings: script.strings,
            typeSpeed: 10,
            callback: function() {
              var history = $('.history').html();
              history = history ? [history] : [];
              history.push('<span class="term-home">root:~$</span> ' + prompt.text());
              if(script.output) {
                history.push(script.output);
                prompt.html('');
                $('.history').html(history.join('<br>'));
              }
              // scroll to bottom of screen
              $('section.terminal').scrollTop($('section.terminal').height());
              // Run next script
              pos++;
              if(pos < data.length) {
                setTimeout(function() {
                  runScripts(data, pos);
                                  }, script.postDelay || 1000);
              }
            }
          });
          break;
        case 'view':

          break;
    }
}

//Note: `typed-custom.js` depends on the library from `https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js` which I have included in index.php:

Для отображения у меня есть следующий контент для index.php

<?php
?>
<!doctype html>
<html lang="en">
<head>

    <title>Test load (load.php)</title>
    <!-- Get jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
    <script src="typed-custom.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>

<body>

    <!-- terminal -->
    <div class="wrap">
        <div class="title-head"> <h5><font color="white">Test</font></h5></div>
        <div class="type-wrap">
            <div class="terminal-window">
                <header>
                    <div class="button green"></div>
                    <div class="button yellow"></div>
                    <div class="button red"></div>
                    <div class="button black"></div>
                </header>
               <section class="terminal">
                    <div class="history"></div>
                    <span class="term-home">root:~$</span>&nbsp;<span class="prompt"></span>
                    <span class="typed-cursor"></span>
                </section>
            <!-- data -->
    </div>
    </div>
    </div>
</body>
</html>

Вышеупомянутое работает отлично, без ошибок.

Шаг 2 - проблема при загрузке внешнего файла php load.php в index.php

Но теперь я хочу добавить еще один дисплей со страницы php, поэтому я создал вызов файла php load.php со следующим содержанием:

<!DOCTYPE html>
<html>
<head>
<title>load.php show data</title>
 <style>
        .loadData div {display:none;}
        .loadData div.display {display: block;}
 </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="loadData">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
</div>

<a href="#" id="loadMore">Load More</a>

<script>
// this code is used to reduce long div display. example 5 div, reduce it to 3 and when click Load More, it will show all.
$(function () {
    $(".loadData div").slice(0, 3).addClass('display');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".loadData div:hidden").addClass('display');
        if ($(".loadData div:hidden").length == 0) {
           $("#loadMore").remove();
        } else {
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
        }
    });
});

</script>
</body>
</html>

Затем я обновил свой index.php, чтобы загрузить файл load.php внизу следующим образом:

index.php

<?php
?>
<!doctype html>
<html lang="en">
<head>

    <title>Test Terminal with another php file load at the bottom (load.php)</title>
    <!-- Get jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
    <script src="typed-custom.js"></script>
    <link href="style.css" rel="stylesheet" />
    <style>
        <!-- internal style -->
    </style>
</head>

<body>

    <!-- terminal -->
    <div class="wrap">
        <div class="title-head"> <h5><font color="white">Test</font></h5></div>
        <div class="type-wrap">
            <div class="terminal-window">
                <header>
                    <div class="button green"></div>
                    <div class="button yellow"></div>
                    <div class="button red"></div>
                    <div class="button black"></div>
                </header>
               <section class="terminal">
                    <div class="history"></div>
                    <span class="term-home">root:~$</span>&nbsp;<span class="prompt"></span>
                    <span class="typed-cursor"></span>
                </section>
            <!-- data -->
    </div>
    </div>
    </div>
    
<!-- NEW CODE HERE WHICH HAS ERROR: try to load an external file using js -->
<div class="container"></div>
<div> This index.php loads "load.php" below</div>
<div id="contents"></div>
<div> ----------------------- </div>
<script>
 $().ready(function() {
        $("#contents").load("load.php");

 });
</script>
</body>
</html>

Но когда я запустил приведенный выше код, я получил сообщение об ошибке:

typed-custom.js:39 Uncaught TypeError: prompt.typed is not a function
    at runScripts (typed-custom.js:39)
    at typed-custom.js:57

И мое окно терминала перестало вводить второй текст (который, как я подозреваю, является конфликтом js), но нет проблем с нажатием кнопки «Загрузить еще», которая также использует js для вызова.

Снимок экрана с ошибкой: Это ошибка визуального элемента

Я искал эту ошибку, и в ней говорилось, что у меня может быть конфликт jquery, но я не уверен, какая часть является конфликтом. Любая идея?

1
Kalib Zen 15 Июн 2020 в 09:42

1 ответ

Лучший ответ

Если load.php предназначен для вставки в index.php, тогда он не должен иметь собственных тегов html, head и body. Это должен быть просто фрагмент HTML, который будет вставлен на главную страницу. Загрузка совершенно нового отдельного HTML-документа (как обозначено тегами html / head / body) внутри другого HTML-документа не имеет никакого смысла.

Также ... вы просто добавляете "load.php" на страницу, как только index.php завершает загрузку. Вместо этого вы можете просто включить его с помощью команды PHP include - таким образом он будет отправлен в браузер одновременно с index.php и его не нужно будет загружать отдельно. Это было бы более эффективно и менее подвержено ошибкам.

И load.php не нужно добавлять еще одну копию jQuery, поэтому вы можете удалить ее - это может вызвать конфликты или неожиданное поведение. Браузер видит оба файла как часть одной страницы, поэтому ему нужна только одна копия jQuery.

1
ADyson 15 Июн 2020 в 08:28