Question

我想在“显示QR码”按钮上显示QR码onclick或onmousehover
我还想确保产生并显示QR码的http://www.qrsrc.com的javascript只有当用鼠标点击或悬停“显示QR码”按钮时才会显示或显示QR码。

下面是我用于此的脚本，但它不起作用。任何人都可以告诉我这个脚本有什么问题。

这是Blogger的编码脚本： -

&lt;button onclick=&quot;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代码（google 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

从function () {属性和＆＃39;}＆＃39>中删除onclick在末尾。当你设置一个内联的事件属性时，你提供代码本身，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>

如何在单击按钮时document.write（）

4 个答案: