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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.