twitter的個人資料小部件包含在單獨的javascript文件中

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

對我來說，解決方案只是向您希望小部件呈現到其中的元素的options對象添加一個“ id”屬性。 這樣，您甚至可以使用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

只需將整個代碼放入一個新的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();

Answer 3

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 4

好的，看來我的問題不明白。

我做不到我想要的。 但是簡化我的問題的方法是創建一個用於設置小部件的json對象。

我仍然想找到一種在正文標簽內不使用腳本標簽的方法

非常感謝觀看者！