我想将内部HTML中的JSON和JavaScript移动到外部文件中。
以下示例是我正在运行的测试,以确保数据被拉入。一旦我开始添加实际数据,JSON和JS将会增长,我不希望它使HTML混乱。
那将会有第三方根据需要编辑JSON数据,所以我不希望他们在HTML中这样做。
以下是CodePen的示例:http://codepen.io/frankDraws/pen/btvcr
以下是代码:
var data = { "PreferredFlexPay":[
{
priceMonth:"$20.00 / Month",
priceDownPayment:"$10.00 / Down Payment"
}
]}
// PREFERRED ANNUAL PASS FLEX PAY MONTH
var output='<span class="price-month">';
for (var i in data.PreferredFlexPay) {
output+=data.PreferredFlexPay[i].priceMonth;
}
output+='</span>';
document.getElementById('preferred-FP-month').innerHTML=output;
// PREFERRED ANNUAL PASS FLEX PAY DOWNPAYMENT
var output='<span class="price-downpayment">';
for (var i in data.PreferredFlexPay) {
output+=data.PreferredFlexPay[i].priceDownPayment;
}
output+='</span>';
document.getElementById('preferred-FP-downpayment').innerHTML=output;
body, html {
background: rgba(73,155,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(0,81,168,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#0051a8', GradientType=1 );
background-size:cover;
width:100%;
height:100%;
font: normal 20px/1.8em Roboto, Helvetica, sans-serif;
padding: 8px;
margin: auto;
}
div {
max-width: 450px;
height: auto;
background: #fff;
margin: auto;
border-radius: 4px;
padding:20px;
}
<div>
<table class="fp-table">
<tr><td id="preferred-FP-month"></td></tr>
<tr><td id="preferred-FP-downpayment"></td></tr>
</table>
</div>
答案 0 :(得分:1)
您将JavaScript放在自己的文件中,传统上使用.js
扩展名,并使用script
标记在HTML中引用该文件:
<script src="yourfile.js"></script>
(浏览器将完全忽略您在开始和结束标记之间放置的任何内容。)
类似于CSS(扩展名.css
):
<link rel="stylesheet" href="yourfile.css">
如果你有JSON(你没有问题,正如Felix指出的那样),那通常会放在一个.json
扩展名的文件中,你可以通过XHR(ajax)加载它。但通常如果您想在JavaScript中使用静态数据,则只需直接声明JavaScript变量等。
答案 1 :(得分:0)
我弄明白为什么它不起作用。我需要在</body>
之前将链接放到页面底部的外部文件中。
谢谢大家的帮助!我喜欢这个社区。