Question

请原谅我的新问题。我还处在学习javascript的初级阶段。我不确定如果我能准确地向你们描述我正在尝试做什么，但我会尝试。

是否可以将javascript文件加载到html页面上？

例如，

。 Twitter为我提供了twitter小部件的代码，它是一个javascript小部件。我希望能够使用document.write方法在我的页面上显示它。这可能吗。这是一个例子。

这是他们给我的代码。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@blahblah',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'blahblah',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#ebebeb',
      color: '#969396'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#bbbcbd'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>

那么，我是否有可能将此内容写入html页面？

document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> '
    <script>
    'new TWTR.Widget({
      version: 2,
      type: 'search',
      search: 'blah',
      interval: 6000,
      title: 'Follow Me On Twitter',
      subject: '@blahBlah',
      width: 180,
      height: 300,
      theme: {
        shell: {
          background: '#ebebeb',
          color: '#969396'
        },
        tweets: {
          background: '#ffffff',
          color: '#000000',
          links: '#bbbcbd'
        }
      },
      features: {
        scrollbar: false,
        loop: true,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        toptweets: true,
        behavior: 'default'
      }
    }).render().start();
    </script> ');

或者我必须将每个脚本写成这样的单独行？

document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> ');
<script>
document.write('new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#ebebeb',
      color: '#969396'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#bbbcbd'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script> ');   
 }

我试过了，但是DW给了我一个语法错误。这是我写的整个脚本。

  <script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();    

 if (7 <= currentTime&&currentTime < 17) {

       document.write('<' + 'script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#242124',
      color: '#f0af4d'
    },
    tweets: {
      background: '#333333',
      color: '#c2c2c2',
      links: '#f7bc63'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</' + 'script> ');   
 }

 else {
      document.write('<' + 'script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#17d1ff',
      color: '#ff8fda'
    },
    tweets: {
      background: '#ededed',
      color: '#383838',
      links: '#ff8aed'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</' + 'script> ');

  }

      }

Answer 1

您可以这样做，但您需要确保在</script>来电中分解文字document.write，否则浏览器会对其进行处理作为document.write调用所在的脚本标记的结尾。通常的方法是打破这个词：

...blah blah blah</" + "script>");

或在正斜杠前加一个反斜杠：

...blah blah blah<\/" + "script>");

这可能是我的偏执，但我也是这样做的（第一点）也是为了打开脚本标签。

就是否使用一个document.write个电话进行，无关紧要。 document.write添加将由HTML解析器解析的文本流。无论你是一次全部写出来还是使用一百个单独的电话来做这件事都没关系。

更新：您在问题中添加的代码的一些要点：

代码无法解析，您使用'作为document.write调用的引号字符，但您也在将其用于您正在编写的代码中的字符串。这意味着代码中的第一个'（在“type：”之后）将结束document.write字符串。
请记住，document.write仅在页面的初始加载期间有效，作为解析序列的一部分。你不能在以后召唤document.write，以回应一个事件（或者更确切地说，如果你这样做，它的概率非常低，它会做你想要的 - 它会尝试替换页面的全部内容）。在您添加到问题的代码中，您正在定义函数changTwitter但从不调用它。你必须要求它做任何事情。

为什么不使用脚本中的代码来按时间调整颜色，而不是输出完全不同的脚本？类似的东西：

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(function() {
    var currentTime = new Date().getHours()
        shellColor,
        shellBackground,
        tweetColor,
        tweetBackground,
        linkColor;    

    if (7 <= currentTime&&currentTime < 17) {
        shellColor = /*...whatever*/;
        shellBackground = /*...whatever*/;
        tweetColor = /*...whatever*/;
        tweetBackground = /*...whatever*/;
        linkColor = /*...whatever*/;
    }
    else {
        shellColor = /*...whatever*/;
        shellBackground = /*...whatever*/;
        tweetColor = /*...whatever*/;
        tweetBackground = /*...whatever*/;
        linkColor = /*...whatever*/;
    }
    new TWTR.Widget({
      version: 2,
      type: 'search',
      search: '@blahblah',
      interval: 6000,
      title: 'Follow Me On Twitter',
      subject: 'blahblah',
      width: 180,
      height: 300,
      theme: {
        shell: {
          background: shellBackground,
          color: shellColor
        },
        tweets: {
          background: tweetBackground,
          color: tweetColor,
          links: linkColor
        }
      },
      features: {
        scrollbar: false,
        loop: true,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        toptweets: true,
        behavior: 'default'
      }
    }).render().start();
})();
</script>

Answer 2

只需将代码放在单独的javascript文件中，并将其包含在 <script src="name_you_saved_it_under.js"></script> 中（将其放在要包含在其中的任何HTML文档的<head>中）。

Answer 3

使用JQuery可以实现以下解决方案：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

/**
 * Function to load funcions dynamically
 * by inserting a scrip tag into the head section
 *
 * @params      <String> path to script
 * @return        none.
 */
function load_script(src) {

    // docorate an empty elemend node with the correct 
    // script source and then append it to the head section
    $('<script><\/script>').attr('src', src).appendTo($('head')[0]);

}

</script>

PS：此脚本尚未经过测试，但应该接近您的需要。

希望这有帮助。

使用document.write（）加载javascript

3 个答案: