Question

所以最初我在谷歌趋势中加入了推荐的嵌入链接，就像在我的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

为什么会这样？为什么以后添加脚本标记会导致'sorta'重定向？它与谷歌趋势开发者如何在嵌入式加载器中编写代码有关吗？如果没有在我的关键渲染路径中使用两个脚本标记

，还有另一种方法可以解决这个问题吗？

感谢。

谷歌趋势嵌入将我重定向到只有iframe的页面

0 个答案: