Question

我正在尝试创建一个测试网页，该网页将容纳两个div容器，一个位于左侧，宽度为45％，另一个位于右侧，宽度为45％。左边的那个将有一个徽标矩阵，对应于我想要动态嵌入页面右侧容器中的各种推特供稿。这意味着如果我点击左侧徽标矩阵上的“Google”缩略图，那么右侧的空容器将立即运行一个脚本，并嵌入一个与此相关的Twitter Feed Twitter处理“@ Google”

<div id="lefthand-container">
    <center>
        <!--------------------Feed #1--------------->
        <a href="#"><img src="/images/googleicon.png" class="grow" width="150" 
           title="Google" alt="Google" border="5" 
           style="box-shadow: 3px 3px 2px #888888;" onclick="FeedInduce_Google()"></a>
        <!--...--->
    </center>
</div>
<!---------------------End List of Feeds-------------------->

<div id="righthand-container">
        <h1>This should get replaced with the feed information of the image you click</h1>
</div>

<script type="text/javascript"><!--
    function FeedInduce_Google()
        {document.getElementById("righthand-container").innerHTML = GoogleFeed;}
            // ...
            GoogleFeed =    '<center>';
            GoogleFeed +=   '<img src="http://patrickcoombe.com/wp-content/uploads/2015/09/new-google-logo-2015.png" width="450" alt="Google"><br/>';
            GoogleFeed +=   '<a class="twitter-timeline" href="https://twitter.com/google" target="_blank">Tweets by @Google</a><br/>';
            GoogleFeed +=   '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br/>';

不幸的是，每次点击Google缩略图时，它只会加载变量“GoogleFeed”的前三行

我会使用图像语法，但我需要“10个声誉”，对不起！ http://imgur.com/xAGZILk.png

我确实按照指示引用了Twitter嵌入设置脚本，这是第一个在身体加载时运行的脚本，就在开放体标记的正下方

<script>window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };
            return t;
        }(document, "script", "twitter-wjs"));
    </script>

如果你看得很辛苦，那看起来好像Twitter重定向句柄下面有一个小空间是innerHTML，所以这表明javascript实际上是在那里发布的东西，但脚本似乎不会创建我想要的小部件供稿。

有没有人知道为什么这种方法无法通过 document.innerHTML 动态嵌入Twitter Feed？

如何让.innerHTML编写一个工作脚本

0 个答案: