我想外化模板，以便能够在不同的页面中重用该功能。我要放在模态窗口中的页面内容。我想用javascript获取外部页面的内容。
var establisment1 = [];
establisment1["name"] = "Est 1";
establisment1["type"] = "Clinic";
establisment1["adress"] = "aaaaa";
establisment1["PostalCode"] = "95000";
establisment1["Town"] = "paris";
establisment1["CreationDate"] = "2001";
establisment1["ChangesetDate"] = "2010";
var establisment2 = [];
establisment2["name"] = "Est 2";
establisment2["type"] = "Pharma";
establisment2["adress"] = "bbbbb";
establisment2["PostalCode"] = "91000";
establisment2["Town"] = "lyon";
establisment2["CreationDate"] = "2000";
establisment2["ChangesetDate"] = "2008";
var establisment3 = [];
establisment3["name"] = "Est 3";
establisment3["type"] = "ABC";
establisment3["adress"] = "ccccc";
establisment3["PostalCode"] = "70000";
establisment3["Town"] = "lille";
establisment3["CreationDate"] = "1990";
establisment3["ChangesetDate"] = "2001";
var establisment4 = [];
establisment4["name"] = "Est 4";
establisment4["type"] = "absd";
establisment4["adress"] = "ddddd";
establisment4["PostalCode"] = "80000";
establisment4["Town"] = "lille";
establisment4["CreationDate"] = "1980";
establisment4["ChangesetDate"] = "2016";
var establishments = [establisment1, establisment2, establisment3,establisment4];
function openModal(id) {
fillData(id);
showDialog();
}
function fillData(id) {
establisment = establishments[id];
var string = document.getElementById("rendertableTemplate").innerHTML;
var replacedString1 = string.replace("$EstablishmentName", establisment["name"]);
var replacedString2 = replacedString1.replace("$EstablishmentType", establisment["type"]);
var replacedString3 = replacedString2.replace("$EstablishmentAdress", establisment["adress"]);
var replacedString4 = replacedString3.replace("$EstablishmentPostalCode", establisment["PostalCode"]);
var replacedString5 = replacedString4.replace("$EstablishmentTown", establisment["Town"]);
var replacedString6 = replacedString5.replace("$EstablishmentCreationDate", establisment["CreationDate"]);
var replacedString7 = replacedString6.replace("$EstablishmentChangesetDate", establisment["ChangesetDate"]);
document.getElementById("rendertable").innerHTML = replacedString2;
document.getElementById("rendertable").innerHTML = replacedString3;
document.getElementById("rendertable").innerHTML = replacedString4;
document.getElementById("rendertable").innerHTML = replacedString5;
document.getElementById("rendertable").innerHTML = replacedString6;
document.getElementById("rendertable").innerHTML = replacedString7;
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="test2 - Copy.js" type="text/javascript"></script>
</head>
<body>
<h1>Establishments</h1>
<div class="container">
<!-- Trigger the modal -->
<table class="table table-striped table-bordered">
<thead>
<th>Name</th>
<th>Town</th>
</thead>
<tbody>
<tr><td><a onclick="openModal(0);" data-toggle="modal" data-target="#myModal" data-backdrop="true">company 1</a></td>
<td><a onclick="openModal(0);" data-toggle="modal" data-target="#myModal" data-backdrop="true">country 1</a></td></tr>
<tr><td><a onclick="openModal(1);" data-toggle="modal" data-target="#myModal" data-backdrop="true">company 2</a></td>
<td><a onclick="openModal(1);" data-toggle="modal" data-target="#myModal" data-backdrop="true">country 2</a></td></tr>
<tr><td><a onclick="openModal(2);" data-toggle="modal" data-target="#myModal" data-backdrop="true">company 3</a></td>
<td><a onclick="openModal(2);" data-toggle="modal" data-target="#myModal" data-backdrop="true">country 3</a></td></tr>
<tr><td><a onclick="openModal(3);" data-toggle="modal" data-target="#myModal" data-backdrop="true">company 4</a></td>
<td><a onclick="openModal(3);" data-toggle="modal" data-target="#myModal" data-backdrop="true">country 4</a></td></tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h4 class="modal-title">Establishment</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered" id="rendertable">
<tbody>
<tr>
<td>Name</td>
<td><p>$EstablishmentName</p></td>
</tr>
<tr>
<td>EstablishmentType</td>
<td><p>$EstablishmentType</p></td>
</tr>
<tr>
<td>Address</td>
<td><p>$EstablishmentAdress</p></td>
</tr>
<tr>
<td>PostalCode</td>
<td><p>$EstablishmentPostalCode</p></td>
</tr>
<tr>
<td>Town</td>
<td><p>$EstablishmentTown</p></td>
</tr>
<tr>
<td>CreationDate</td>
<td><p>$EstablishmentCreationDate</p></td>
</tr>
<tr>
<td>ChangesetDate</td>
<td><p>$EstablishmentChangesetDate</p></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</table>
<!--modal template-->
<div class="modal">
<div class="modal-content">
<div class="modal-body">
<table class="table table-striped table-bordered" id="rendertableTemplate">
<tbody>
<tr>
<td>Name</td>
<td><p>$EstablishmentName</p></td>
</tr>
<tr>
<td>EstablishmentType</td>
<td><p>$EstablishmentType</p></td>
</tr>
<tr>
<td>Address</td>
<td><p>$EstablishmentAdress</p></td>
</tr>
<tr>
<td>PostalCode</td>
<td><p>$EstablishmentPostalCode</p></td>
</tr>
<tr>
<td>Town</td>
<td><p>$EstablishmentTown</p></td>
</tr>
<tr>
<td>CreationDate</td>
<td><p>$EstablishmentCreationDate</p></td>
</tr>
<tr>
<td>ChangesetDate</td>
<td><p>$EstablishmentChangesetDate</p></td>
</tr>
</tbody>
</div>
</div>
</div>
</body>
</html>