加载另一个php文件时，jquery函数冲突并返回错误
加载另一个php文件时，jquery函数冲突并返回错误
提问于 2020-06-15 14:43:00
我有以下在终端窗口中显示键入文本的工作示例应用程序：
步骤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> ',
postDelay: 1000,
},
{
action: 'type',
strings: ["typing-2:"],
output: '<span class="green"><small>This is second typing</small></span> ',
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> <span class="prompt"></span>
<span class="typed-cursor"></span>
</section>
<!-- data -->
</div>
</div>
</div>
</body>
</html>上面的代码运行得很好，没有错误。
步骤2-在index.php中加载外部php load.php文件时的问题
但是现在我想从一个php页面添加另一个显示，所以我创建了一个名为load.php的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> <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冲突)，但点击'Load More‘按钮没有问题，这也是使用js调用的。
错误屏幕截图：
我搜索了这个错误，它说我可能有jquery冲突，但我不确定哪个部分是冲突。有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-15 16:28:47
如果load.php打算插入到index.php中，那么它不应该有自己的html、head和body标记。它应该只是HTML的一个片段，它将被注入到主页中。在另一个HTML文档中加载一个全新的单独HTML文档(如html/head/body标记所示)是没有任何意义的。
此外，只要index.php完成加载，就可以将"load.php“添加到页面中。相反，您可以通过PHP的include命令包含它-这样它就会与index.php同时发送到浏览器，而不需要单独获取。这会更有效率，更不容易出错。
而且load.php不需要添加jQuery的另一个副本，所以您可以删除它-它可能会导致冲突或意外行为。浏览器将这两个文件视为单个页面的一部分，因此它只需要一个jQuery副本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62382736
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号