blocks|key|635838|text|看起来google.load正在使用document.write()将脚本添加到页面中，如果在页面加载之后使用它，则会清除html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|635839|这解释了更深入的内容：http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6|offset|length|635840|使用其中一个想法，您可以使用load的回调来强制它使用append而不是doc.write：|635841|setTimeout(function(){google.load('visualization',+'1',+{'callback':'alert("2+sec+wait")',+'packages':['corechart']})},+2000);|code-block|syntax|javascript|635842|这演示了延迟警报窗口的2秒等待时间|635843|entityMap|0|LINK|mutability|MUTABLE|url|http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6^0|0|B|2J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Looks like google.load is adding the script to the page using a document.write(), which if used after the page loads, wipes out the html. 

This explains more in-depth:
<a href="http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6">http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6</a>

Using one of the ideas, you could use a callback for the load to force it use append rather than doc.write:

<pre><code>setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);
</code></pre>

This demonstrates the 2 second wait with the delayed alert window

blocks|key|635884|text|注意:以下是避免时间延迟的好方法--它恰到好处。该示例通常可供所有脚本使用(需要它)，但特别适用于Greasemonkey。它还使用了Google+chart+API作为示例，但此解决方案超越了其他Google+API，可以在任何需要等待脚本加载的地方使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|635885|在使用google.load添加谷歌图表时，使用带回调的Greasemonkey并不能解决这个问题。在这个过程中(Greasemonkey注入到页面中)，添加了www.google.com/jsapi脚本节点。在为Google的jsapi+javascript添加这个元素之后，注入的(或页面)脚本就可以使用google.load命令(需要在添加的节点中加载)，但是这个jsapi脚本还没有加载。设置超时是可行的，但超时只是Google+jsapi脚本加载与injected/page脚本的计时竞赛的一种变通方法。移动脚本执行google.load+(可能还有google.setOnLoadCallback)的位置可能会影响计时竞争情况。下面提供了一个在调用google.load之前等待google+script元素加载的解决方案。下面是一个示例：|635886|//+*********+INJECTED+SCRIPT+*********//
//+add+element
var+gscript+=+document.createElement('script');
gscript.setAttribute("type",+"application/javascript");
gscript.setAttribute("id",+"XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

//+event+listener+setup+++++
gscript.addEventListener("load",++++
++++function+changeCB(params)+{
++++++++gscript.removeEventListener("load",+changeCB);
++++++++google.load("visualization",+"1",+{packages:["corechart"],+"callback":+
++++++++++++function+drawChart()+{
++++++++++++++++var+data;
++++++++++++++++//+set+the+durationChart+data+(not+in+example)
++++++++++++++++data+=+new+google.visualization.arrayToDataTable(durationChart);

++++++++++++++++var+options+=+{
++++++++++++++++++++title:"Chart+Title",
++++++++++++++++++++legend:+{position:"none"},
++++++++++++++++++++backgroundColor:"white",
++++++++++++++++++++colors:["white","Blue"],
++++++++++++++++++++width:+window.innerWidth+%7C%7C+document.body.clientWidth,
++++++++++++++++++++height:+window.innerHeight+%7C%7C+document.body.clientHeight,
++++++++++++++++++++vAxis:+{title:+"Durations",+baselineColor:+"black",+textStyle:{fontSize:12}},
++++++++++++++++++++hAxis:+{title:+"Days+Since+First+Instance"},
++++++++++++++++++++height:+((cnt+>+5)?+cnt+*+50+:+300),
++++++++++++++++++++isStacked:+true
++++++++++++++++};+//+options


++++++++++++++++//+put+chart+into+your+div+element
++++++++++++++++var+chart+=+new+google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
++++++++++++++++chart.draw(data,+options);
++++++++++++}+//+drawChart+function
++++++++});+//packages+within+google.load+&+google+load
++++}+//+callback+changeCB
);

//+can+use+SSL+as+"https://www.google.com/jsapi";
gscript.src+=+"http://www.google.com/jsapi";|code-block|syntax|javascript|635887|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Note: The following is good for avoiding a time delay - it's just in time. The example can be used generally by all scripts (needing it), but was particularly used with Greasemonkey. It also uses the Google chart API as an example, but this solution goes beyond to other Google APIs and can be used anywhere you need to wait for a script to load.

Using google.load with a callback did not solve the issue when using Greasemonkey to add a Google chart. In the process (Greasemonkey injected into page), the www.google.com/jsapi script node is added. After adding this element for Google's jsapi javascript, the injected (or page) script is ready to use the the google.load command (which needs to be loaded in the added node), but this jsapi script did not load yet. Setting the a timeout worked, but the timeout was merely a workaround for the Google jsapi script load's timing race with the injected/page script. Moving around where a script executes the google.load (and possibly google.setOnLoadCallback) can affect the timing race situation. The following proffers a solution that waits for the google script element to load before calling google.load. Here is an example:

<pre><code>// ********* INJECTED SCRIPT *********//
// add element
var gscript = document.createElement('script');
gscript.setAttribute("type", "application/javascript");
gscript.setAttribute("id", "XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

// event listener setup 
gscript.addEventListener("load", 
 function changeCB(params) {
 gscript.removeEventListener("load", changeCB);
 google.load("visualization", "1", {packages:["corechart"], "callback": 
 function drawChart() {
 var data;
 // set the durationChart data (not in example)
 data = new google.visualization.arrayToDataTable(durationChart);

 var options = {
 title:"Chart Title",
 legend: {position:"none"},
 backgroundColor:"white",
 colors:["white","Blue"],
 width: window.innerWidth || document.body.clientWidth,
 height: window.innerHeight || document.body.clientHeight,
 vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}},
 hAxis: {title: "Days Since First Instance"},
 height: ((cnt &gt; 5)? cnt * 50 : 300),
 isStacked: true
 }; // options


 // put chart into your div element
 var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
 chart.draw(data, options);
 } // drawChart function
 }); //packages within google.load &amp; google load
 } // callback changeCB
);

// can use SSL as "https://www.google.com/jsapi";
gscript.src = "http://www.google.com/jsapi";
</code></pre>

blocks|key|421402|text|您只需定义一个回调，它将不会清除页面(也许旧版本的google.load()可以，但显然，如果与回调一起使用，新版本就不会)。下面是我加载"google.charts“库时的一个简化示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|421403|if(google)+{
++++google.load('visualization',+'1.0',+{
++++++++packages:+['corechart'],
++++++++callback:+function()+{
++++++++++++//+do+stuff,+if+you+wan't+-+it+doesn't+matter,+because+the+page+isn't+blank!
++++++++}
++++}+)
}|code-block|syntax|javascript|421404|当我这样做的时候，我仍然得到了空白页面--但是有了callback，我的问题就解决了。|421405|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You just have to define a callback, and it will not clear the page (maybe the older versions of google.load() did, but apparently the new ones do not if used with callback). Here a simplified example when I'm loading the "google.charts" lib:

<pre><code>if(google) {
 google.load('visualization', '1.0', {
 packages: ['corechart'],
 callback: function() {
 // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
 }
 } )
}
</code></pre>

When doing it whitout callback(), I still get the blank page too - but with callback, it's fixed for me.

blocks|key|421440|text|您不需要设置超时。还有另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|421441|$.getScript("https://www.google.com/jsapi",+function+()+{
+++++google.load('visualization',+'1',+{+'callback':+'alert()',+'packages':+['corechart']+});
});|code-block|syntax|javascript|421442|解释：|421443|+function+()+{
+++++google.load('visualization',+'1',+{+'callback':+'alert()',+'packages':+['corechart']+});
+}|421444|将在成功加载JSAPI脚本后执行警告，然后在成功google.load()之后执行​​()。|421445|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You don't need to set timeout. There is another way:

<pre><code>$.getScript("https://www.google.com/jsapi", function () {
 google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
});
</code></pre>

Explanation:

<pre><code> function () {
 google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
 }
</code></pre>

will be executed ​​after successful load JSAPI script, then alert() will be executed ​​after successful google.load()

blocks|key|636026|text|在尝试在jQuery+$(document).ready(…)包装器中移动google.load(…)时，我遇到了这个问题。将google.load(…)移回ready函数之外，这样它就可以立即执行，从而解决了问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|636027|例如，这不起作用：|636028|$(document).ready(function()+{
++++google.load('visualization',+'1',+{packages:+['corechart']});
});|code-block|syntax|javascript|636029|但这确实是：|636030|google.load('visualization',+'1',+{packages:+['corechart']});
$(document).ready(function()+{
++++//+…
});|636031|entityMap^0|B|K|11|E|1R|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

I encountered this problem when attempting to move a <code>google.load(…)</code> inside a jQuery <code>$(document).ready(…)</code> wrapper. Moving the <code>google.load(…)</code> back outside of the ready function so it executes immediately solved the problem.

For example, this doesn't work:

<pre><code>$(document).ready(function() {
 google.load('visualization', '1', {packages: ['corechart']});
});
</code></pre>

But this does:

<pre><code>google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
 // …
});
</code></pre>

Well, this looks strange but I'm not able to find a solution.

Why in the world does this fiddle <a href="http://jsfiddle.net/carlesso/PKkFf/">http://jsfiddle.net/carlesso/PKkFf/</a> show the page content and, then when google.load occurs, the page goes blank?

It works well if the google.load is done immediately, but having it delayed does not work at all.

Here the page source for the lazier (or smarter) of you:

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Ciao&lt;/title&gt;
 &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Test&lt;/h1&gt;
 &lt;div id="quicivanno"&gt;
 &lt;p&gt;ciao&lt;/p&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;script type="text/javascript"&gt;
 setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 2000);
 &lt;/script&gt;
&lt;/html&gt;​
</code></pre>

Why does google.load cause my page to go blank?

jQuery

嗯，这看起来很奇怪，但我找不到解决方案。到底为什么google.load会显示页面内容，而当出现fiddle时，页面却变成空白呢？如果google.load是立即完成的，那么它工作得很好，但是延迟它根本不起作用。这里是给懒惰(或聪明)的人的页面源代码：<!DOCTYPE html><html lang="en"> <...

问为什么google.load会导致我的页面变成空白？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么google.load会导致我的页面变成空白？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么google.load会导致我的页面变成空白？
EN