我想要尽可能多地支持旧浏览器的解决方案。否则我会说currentScript或data 属性方法将是最时尚的。
这是这些方法中唯一没有在这里提出的。特别是,如果由于某种原因您有大量数据,那么最好的选择可能是:
本地存储
/* On the original page, you add an inline JS Script.
* If you only have one datum you don't need JSON:
* localStorage.setItem('datum', 'Information here.');
* But for many parameters, JSON makes things easier: */
var data = {'data1': 'I got a lot of data.',
'data2': 'More of my data.',
'data3': 'Even more data.'};
localStorage.setItem('data', JSON.stringify(data));
/* External target JS Script, where your data is needed: */
var data = JSON.parse(localStorage.getItem('data'));
console.log(data['data1']);
localStorage 具有完整的现代浏览器支持,并且对旧浏览器的支持也出奇的好,可以追溯到 IE 8、Firefox 3,5 和 Safari 4 [11 年前] 等。
如果您没有大量数据,但仍需要广泛的浏览器支持,那么最好的选择可能是:
元标签 [by Robidu]
/* HTML: */
<meta name="yourData" content="Your data is here" />
/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;
这样做的缺陷是,将元标记 [直到 HTML 4] 放置在 head 标记中的正确位置,您可能不希望将这些数据放在那里。为避免这种情况,或将元标记放在正文中,您可以使用:
隐藏段落
/* HTML: */
<p hidden id="yourData">Your data is here</p>
/* JS: */
var yourData = document.getElementById('yourData').innerHTML;
要获得更多浏览器支持,您可以使用 CSS 类而不是 hidden 属性:
/* CSS: */
.hidden {
display: none;
}
/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>