Question

我只是想把自定义twitter的个人资料小部件放在我的页面上，但我喜欢把代码放在一个单独的javascript文件中。

所以，我不知道该怎么做。

我的意思是，我把它放在头标上

<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>

为小部件创建一个div，将其余的代码放在另一个javascript中

new TWTR.Widget(json_twitter_options).render().setUser('username').start();

但是，如何将结果“放”到那个小部件中...我完全失去了，先谢谢。

Answer 1

我的解决方案只是将“id”属性添加到您希望窗口小部件呈现的元素的options对象中。这样，您甚至可以使用require.js加载脚本，或者在页面加载后仍然将窗口小部件渲染到您想要的空间中。

顺便说一句，我没有找到任何关于这个属性的文档。

例如：

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 135,
  height: 700,
  theme: {
    shell: {
      background: '#e5e5e5',
      color: '#363F49'
    },
    tweets: {
      background: '#e5e5e5',
      color: '#000000',
      links: '#06C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  },
  id: 'someDivId'
}).render().setUser('comster').start();

Answer 2

js文件不必位于小部件正上方

此代码可以正常测试：

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 135,
  height: 700,
  theme: {
    shell: {
      background: '#e5e5e5',
      color: '#363F49'
    },
    tweets: {
      background: '#e5e5e5',
      color: '#000000',
      links: '#06C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('USERNAME').start();
</script>

Answer 3

好的，似乎我的问题不明白。

我无法做我想做的事。但是，简化我的问题的方法是创建一个用于设置小部件的json对象。

我仍然想找到一种不在body标签内使用脚本标签的方法

非常感谢观众！

Answer 4

将整个代码放入一个新的javascript文件中（将其命名为twitter.js），并将其链接到您希望显示的位置，例如

<div id="twittercode">[js file link goes here]</div>

这整个块应该进入一个新的javascript文件。

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 135,
  height: 700,
  theme: {
    shell: {
      background: '#e5e5e5',
      color: '#363F49'
    },
    tweets: {
      background: '#e5e5e5',
      color: '#000000',
      links: '#06C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('USERNAME').start();

twitter的个人资料小部件包含在一个单独的javascript文件中

4 个答案: