1

所以最初我在我的 html 中包含了来自谷歌趋势的推荐嵌入链接。

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/884_RC03/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"angular","geo":"","time":"today 5-y"},{"keyword":"react","geo":"","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"q=angular,react"}); </script>

通过在页面中已有的内容之上添加谷歌趋势可视化效果很好。JSFIDDLE

然而，在某一时刻，我决定不希望嵌入被渲染阻塞。所以我添加了一些代码，在window.onload之后才开始下载和嵌入谷歌趋势可视化。

<script>
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    function downloadJSAtOnload() {
        //gtrend delayed
        let trendEle = document.getElementById('googleTrend')
        let embedLoaderScript = document.createElement('SCRIPT')
        embedLoaderScript.src = 'https://ssl.gstatic.com/trends_nrtr/884_RC03/embed_loader.js'
        embedLoaderScript.setAttribute('type','text/javascript')

        embedLoaderScript.addEventListener('load',()=>{
            console.log('i just finished downaloding embed loader')
            let initiateTrendScript = document.createElement('SCRIPT')
            initiateTrendScript.setAttribute('type','text/javascript')
            initiateTrendScript.textContent = `trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"angular","geo":"","time":"today 5-y"},{"keyword":"react","geo":"","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"q=angular,react"});`

            trendEle.appendChild(initiateTrendScript)
        })

        trendEle.appendChild(embedLoaderScript)

    }


</script>

但是，稍后添加脚本标记将导致页面被重定向到仅具有 google 趋势可视化的另一个页面。我所有的旧内容将不再出现在页面中。JSFIDDLE。

为什么会这样？为什么稍后添加脚本标签会导致“排序”重定向？是不是跟 google 趋势开发者在 embed-loader 中写代码的方式有关系？在我的关键渲染路径中没有两个脚本标签的情况下是否有另一种方法来解决这个问题

谢谢。

4

0 回答 0