如何通过点击一个按钮来记录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>