将Twitter Widget的Javascript放入< Head>标签，但将其呈现在< Body> [英] Putting Twitter Widget's Javascript within <Head> tags, but have it rendered in <Body>
问题描述
$ b
我正在使用Twitter搜索小部件，目前我已将JavaScript嵌入HTML的正文标记内，如下所示： >
<身体GT;
< script charset =utf-8src =https://widgets.twimg.com/j/2/widget.js>< / script>
< script>
新TWTR.Widget（{
版本：2，
类型：'faves'，
rpp：1，
间隔：7200000，
标题： ''，
主题：''，
宽度：500，
高度：65，
主题：{
shell：{
background：'＃ a4c9b9'，
color：'#ffffff'
}，
tweets：{
background：'＃a4c9b9'，
color：'#ffffff'，
links：'＃444444'
}
}，
特征：{
滚动条：true，
循环：false，
live：false，
行为：'all'
}
}）渲染（）SETUSER（ exampleuser）开始（）。;
< / script>
< / body>
相反，我宁愿将所有的javascript移动到标题（或者可能是页脚？）标记，然后只需将它在没有标记的情况下呈现在身体中。有没有简单的方法来做到这一点？
您可以使用本地JS之一...
window.onload = function（）{
//你的代码在这里
};
或jQuery ...
<$ p $ （函数（）{
//你的代码在这里
}）;
...确保代码在文档加载完成之前不会运行。
这解释了window.onload和$（document）.ready（）。
另一种选择是将你的代码封装在一个命名函数中，并在主体中调用它某处，但你仍然必须把它放在< script>标签。
编辑：使用window.onload ...
< HTML>
< head>
< script>
window.onload = function（）{
new TWTR.Widget（{
版本：2，
类型：'faves'，
rpp：1，
间隔：7200000，
标题：''，
主题：''，
宽度：500，
高度：65，
主题：{
壳：{
背景：'＃a4c9b9'，
颜色：'#ffffff'
}，
tweets：{
背景：'＃a4c9b9'，
color：'#ffffff'，
links：'＃444444'
}
}，
特征：{
滚动条：true，
loop：false，
live：false，
behavior：'all'
}
}）。render（）。setUser（'exampleuser'）。start（）;
};
< / script>
< / head>
< body>< / body>< / html>
I'm working with the Twitter search widget and currently I have the javascript embedded in the within the body tags of the HTML, something like this:
<body>
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
</script>
</body>
Instead though, I'd rather move all that javascript to the header (or maybe the footer?) tag, then simply have it rendered in the body without the tags. Is there a simple way to do this?
You can use one of either native JS...
window.onload = function() {
// your code here
};
or jQuery...
$(document).ready(function() {
// your code here
});
...to ensure the code will not run until the document has finished loading.
This explains the slight difference between window.onload and $(document).ready().
Another option would be to wrap your code in a named function and call it in the body somewhere but you would still have to put it in <script> tags.
EDIT: Using window.onload...
<html>
<head>
<script>
window.onload = function() {
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
};
</script>
</head>
<body></body></html>
这篇关于将Twitter Widget的Javascript放入< Head>标签，但将其呈现在< Body>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
