将 Twitter Widget 的 Javascript 放在 <Head> 标记中，但将其呈现在 <Body> 中答案

【问题标题】：Putting Twitter Widget's Javascript within <Head> tags, but have it rendered in <Body>将 Twitter Widget 的 Javascript 放在 <Head> 标记中，但将其呈现在 <Body> 中
【发布时间】：2012-05-22 07:19:44
【问题描述】：

我正在使用 Twitter 搜索小部件，目前我将 javascript 嵌入到 HTML 的正文标签中，如下所示：

<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>

不过，我宁愿将所有 javascript 移到页眉（或者可能是页脚？）标记，然后简单地将其呈现在没有标记的正文中。有没有简单的方法来做到这一点？

【问题讨论】：

标签： javascript html widget twitter

【解决方案1】：

您可以使用任一本机 JS...

window.onload = function() {
    // your code here
};

或者 jQuery...

$(document).ready(function() {
    // your code here
});

...确保在文档加载完成之前代码不会运行。

This explains the slight difference between window.onload and $(document).ready().

另一种选择是将您的代码包装在一个命名函数中并在主体中的某处调用它，但您仍然必须将它放在

编辑：使用 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>

【讨论】：

感谢您的回答。你能解释一下如何实现这些吗？我对javascript不太熟悉。
澄清一下，所以如果我用window.onload在中定义函数，我该如何在body中调用呢？
您不必自己调用它。 window.onload 是一个事件监听器。它会监控页面并在页面加载完成时自动调用该函数。
明白了！好吧。两者都工作得很好，但我最终使用了 jQuery。然后我在小部件代码中添加了一个“id”属性，将其设置为“twitter_div”，然后在正文中调用该 div id。