Question

我们有一个工具，允许人们将代码添加到动态页面。

需要将一些代码（小部件）注入到DOM中，而不是硬编码到html中。我用jquery来做。问题是它最终会重定向页面......

我需要解决这个问题。

这是一个例子。创建包含以下内容的页面：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript">
    $(function(){

       $('#doInsertW').click(function(){
          var wCode = $('#inputWidget').val();
          $('#putWidget').html(wCode);
       });

    });
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>

然后将其粘贴到输入中，您将看到我的意思：

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

Answer 1

问题是widget.js脚本使用document.write将小部件的HTML放在页面上。如果在页面仍在加载时调用document.write，则可以正常工作。但是，在页面加载完成后调用document.write会重写整个页面。

这是一个快速而肮脏的黑客攻击，会强制它运行（在FireFox中测试）：

$(function(){
    document.write = function(c) { $('#putWidget').append(c) };

   $('#doInsertW').click(function(){
      var wCode = $('#inputWidget').val();
      $('#putWidget').html(wCode);
   });

});

注意，我只是在页面加载完成后覆盖document.write函数。

将脚本插入调用AJAX的DOM中

1 个答案: