我有一个在独立 html 文件中运行良好的故事。我想要一个左侧的滚动链接列表，它将加载包含与所选链接相关的数据的表(我希望它像 W3Schools 站点一样工作)。为此，我创建了一个包含两个 Iframe 的页面:一个用于列表，另一个用于我的数据表。问题是当我将数据表加载到 Iframe 时，它停止工作。我错过了什么？
下面是我的代码:
主页(索引):
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<title>Failed Fax Monitor></title>
</head>
<body>
<iframe id="weeks" src="WeekList.html"></iframe>
<iframe id="requests" src = "Requests.html" name="Requests" ></iframe>
</body>
</html>
列表框架(周)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<script src="jQuery/datatables.min.js"></script>
<script>
$(document).ready(function() {
}
</script>
</head>
<body>
<!--- hard-coded for now will eventually be populated dynamically -->
<ul>
<a href="php/Data.php?Date=20170123">01/23/2017</a>
<a href="php/Data.php?Date=20170116">01/16/2017</a>
<a href="php/Data.php?Date=20170109">01/09/2017</a>
<a href="php/Data.php?Date=20160102">01/02/2017</a>
<a href="php/Data.php?Date=20161226">12/26/2016</a>
<a href="php/Data.php?Date=20161219">12/19/2016</a>
<a href="php/Data.php?Date=20161212">12/12/2016</a>
<a href="php/Data.php?Date=20161205">12/05/2016</a>
<a href="php/Data.php?Date=20161128">11/28/2016</a>
<a href="php/Data.php?Date=20161121">11/21/2016</a>
<a href="php/Data.php?Date=20161114">11/14/2016</a>
<a href="php/Data.php?Date=20161107">11/07/2016</a>
</ul>
</body>
</html>
带有数据表的框架(请求)
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="jQuery/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').dataTable( {
"pageLength" : 50,
fixedHeader: true,
paging: false,
//"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"ajax": {
"url": "php/data.php",
"dataType": "json",
"cache": false,
"contentType": "application/json; charset=utf-8",
"dataSrc": "transactions"
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
最佳答案
这对我有用。您认为这可能是拼写错误吗:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
...在请求框架中应该...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
关于javascript - 我有一个数据表可以独立工作，但不能在 IFrame 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41900345/