我有以下脚本标签。
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "http://localhost:5050/get_time"
}).then(function successCallBack(response) {
$scope.jsonResponse = response.data;
}, function errorCallBack(response) {
$scope.jsonResponse = "failed"
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Response of JSON Below:</p>
<h1>{{jsonResponse}} hi</h1>
</div>
当我在一个全新的 html 文件中运行它时，它起作用了!并返回一个 json 字符串并像 {{jsonResponse}} 中所说的那样打印它
现在这是它在其中不起作用的 HTML 文件。
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>Batch Program Visualization - angular and d3</title>
<link rel="stylesheet" href="css/styles_showChart.css">
<!-- <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> -->
</head>
<body ng-app="Batch_Visualiser_chart" ng-controller="chartController">
<div class="container img.wide">
<img src="css/banner.jpg" />
</div>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'TrainMap')">Train Map</button>
<button id="defaultOpen" class="tablinks" onclick="openTab(event, 'ExecutiveDashboard')">Executive Dashboard</button>
<button id="ProcDet" class="tablinks" onclick="openTab(event, 'ProcessDetails')">Process Details</button>
</div>
<div id="ExecutiveDashboard" class="tabcontent">
<div id="parent">
<div id="flowDiagram">
<svg id="svgSumm" width="2500" height="500" left="20" right="20" top="20" bottom="50" style="background-color: #515b5f;border: 0px solid Black; display: flex "></svg>
<div id="chartsContainer"></div>
</div>
<div id="halfDiv" style="word-wrap: break-word">
<div class="column1" style="word-wrap: break-word">
<!--Alternate way of loading html files, if iframe is not to be used -->
<!--script>
document.getElementById("details").innerHTML='<object type="text/html" data="showOverallStatus.html"></object>';
</script-->
<iframe src="showCategoryDetail.html" style="background-color: #343434; word-wrap: break-word" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
<div class="column2">
<iframe src="showImpact.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
<div class="column3">
<iframe src="showMonthlyRunChart.html" width="410" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
<div class="column4">
<iframe src="showOverallSLA.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
</div>
</div>
</div>
<div id="ProcessDetails" class="tabcontent">
<div id="parent2">
<div id="flowDiagram2">
<iframe id="showOtherTree" src="showTree.html" width="1900" height="450" frameborder="1" onload="" allowtransparency="false"></iframe>
</div>
<div id="chartsContainer"></div>
<div id="halfDiv2">
<div class="column">
<iframe id="milestoneDetail" src="showMilestoneDetail.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
<div class="column">
<iframe id="milestoneRun" src="showTable.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
<div class="column">
<iframe id="milestoneJobs" src="showJobStatus.html" style="background-color: #343434" width="400" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
<div class="column">
<iframe id="childJobs" src="showChildJobs.html" style="background-color: #343434" width="420" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
</div>
</div>
</div>
</div>
<div id="TrainMap" class="tabcontent">
<div id="parent3">
<div id="train_map">
<iframe src="showFullTree.html" style="width: 100%;height:80%; background-color: #515b5f;"></iframe>
</div>
</div>
</div>
<work-history></work-history>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src = 'apps/showSummary.js'></script>
<script>
document.getElementById("defaultOpen").click();
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "http://localhost:5050/get_time"
}).then(function successCallBack(response) {
$scope.jsonResponse = response.data;
}, function errorCallBack(response) {
$scope.jsonResponse = "failed"
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Response of JSON Below:</p>
<h1>{{jsonResponse}} hi</h1>
</div>
</div>
</body>
</html>
无论我将脚本放到哪里，它都不会执行，但一个全新的独立 HTML 文件却可以正常运行。
我知道它不会执行，因为我将 alerts() 放在各处，它甚至不会进入代码，就好像它不存在一样？
有什么想法吗？
最佳答案
摆脱这部分并尝试(我从不相信注释掉的脚本):
<!--script>
document.getElementById("details").innerHTML='<object type="text/html" data="showOverallStatus.html"></object>';
</script-->
如果这不起作用，请一次删除一个 iframe。
而且看起来您包含了 angular.min.js，然后重新包含了一个可能的不同版本。尝试在您添加的代码上方删除对 angular.js 的 cdn 引用。
关于javascript - 脚本标签不在 HTML 文件中执行，但在新文件中执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58224437/