如何通過點擊一個按鈕來記錄document.write（）

Question

我想在按鈕「顯示QR碼」上顯示QR代碼onclick或onmousehover。

我還想要確保生成並顯示QR碼的JavaScript的http://www.qrsrc.com只有當用鼠標單擊或懸停「顯示QR碼」按鈕時才渲染/顯示QR碼。

下面是我使用的腳本，但它不起作用。誰能告訴我這個腳本有什麼問題。

這是Blogger的一個編碼的腳本： -

<button onclick="function() { 
document.write(&quot;&lt;script src=\&quot;http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=<data:post.title/>&amp;id=<data:post.id/>\&quot; id='qrsrc' &gt; &lt;\/script&gt;&quot;);}&quot;&gt;Show QR Code&lt;/button&gt; 

這是一個轉換腳本頁面去住後： - 在

<button onclick="function() { 
document.write("<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id='qrsrc' > <\/script>");}">Show QR Code</button> 

Answer 1

如果你想顯示的QR碼的圖像：

<button onclick=" 
var height=100; 
var width=100; 
var urltoencode = 'http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android'; 
document.getElementById('qr').src='https://chart.googleapis.com/chart?cht=qr&chs='+width+'x'+height+'&chl='+escape(urltoencode);" 
>Show QR Code</button> 
<img id="qr"> 

JSFiddle

或與jQuery相同：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<button onclick=" 
var height=100; 
var width=100; 
var urltoencode = 'http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android'; 
$('#qr').attr('src', 'https://chart.googleapis.com/chart?cht=qr&chs='+width+'x'+height+'&chl='+escape(urltoencode));" 
>Show QR Code</button> 
<img id="qr"> 

JSFiddle

這會在HTML中創建一個按鈕和一個隱藏圖像。 腳本定義了高度，寬度和「待編碼」變量，並找到隱藏圖像的源代碼將被設置爲qr代碼（谷歌api）

最後，在懸停在（+花哨淡入淡出）上：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<button style="float: left;" id="qrButton">Show QR Code</button> 
<img id="qr"> 
<script> 
var height=100; 
var width=100; 
var urltoencode = 'http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android'; 
$('#qr').attr('src', 'https://chart.googleapis.com/chart?cht=qr&chs='+width+'x'+height+'&chl='+escape(urltoencode)).hide(); 
$('#qrButton').mouseenter(function(){ 
    $('#qr').fadeIn("slow"); 
}); 
$('#qrButton').mouseleave(function(){ 
    $('#qr').fadeOut("slow"); 
}); 
</script> 

JSFiddle

Answer 2

從onclick屬性去掉function() {和 '}'結束。 當你設置一個內聯的事件屬性時，你自己提供了代碼，JavaScript會把你的代碼包裝在一個函數中。所以你只要做到這一點：

<button onclick="document.write('<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id=\"qrsrc\" ><\/script>');">Show QR Code</button> 

雖然你，因爲，它完全蓋過你的頁面有其他標籤最好不要用document.write。

，但如果你堅持使用功能，你可以這樣做：

<button onclick="(function(){ document.write('<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id=\"qrsrc\" ><\/script>'); })();">Show QR Code</button> 

Answer 3

大多數瀏覽器不允許document.write工作，因爲它的安全問題。在XHTML中，它也不起作用。 document.write在通話中刪除該頁面中的所有其他內容，所以這是不好的做法，不要使用它。改爲使用element.innerHTML或element.appendChild。

Answer 4

如果您有jQuery的，而是執行此操作：

<button onclick='$(this).after(
     $("<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id=\"qrsrc\" />") 
    );'>Show QR Code</button>