[英]onclick JS event on a image map?
I have been searching for hours for an answer here at stackoverflow and in the web. 在这里,我一直在Stackoverflow和Web上寻找答案的时间。 However all the answers I tried didn't work for me.
但是,我尝试的所有答案均不适用于我。
Basically, I would like to put an onclick event on an image map. 基本上,我想在图像地图上放置一个onclick事件。 the event is a java script function.
该事件是一个Java脚本函数。 When the user click on an area element it will download the text on the editor as a word file.
当用户单击区域元素时,它将在编辑器上将文本下载为word文件。
To illustrate what I'm trying to explain, here is the https://jsfiddle.net/00bk1zad/ with the code I made. 为了说明我要解释的内容,这是带有我编写的代码的https://jsfiddle.net/00bk1zad/ 。 I don't know what should I edit to make it working.
我不知道该如何编辑才能使其正常工作。
Thank you! 谢谢!
The code: 编码:
function txtdownload() { console.log('called') var textToSave = document.getElementById("editor").value; var textToSaveAsBlob = new Blob([textToSave], { type: "application/msword" }); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = "YouKtub.doc"; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); }
<div align=center> <textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea> </div> <div> <img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0> </div> <map name=map1Map> <area coords="268,46,47,113" href="#" onclick="txtdownload()"> </map>
I removed downloadLink.onclick = destroyClickedElement;
我删除了
downloadLink.onclick = destroyClickedElement;
and added document.body.removeChild(downloadLink);
并添加了
document.body.removeChild(downloadLink);
at the end. 在末尾。 So when you press button and download file, the hidden link is destroyed.
因此,当您按下按钮并下载文件时,隐藏的链接将被破坏。 (Works in Chrome)
(适用于Chrome)
UPDATE: (now works in Firefox locally or on JSFiddle - stackoverflow codesnippet still doesn't work) In area tag I removed onclick="txtdownload()"
and changed href="#"
to href="javascript:txtdownload()"
. 更新:(现在可以在Firefox本地或JSFiddle上使用-stackoverflow codenippet仍然不起作用)在区域标记中,我删除了
onclick="txtdownload()"
并将href="#"
更改为href="javascript:txtdownload()"
。 JSFiddle: https://jsfiddle.net/00bk1zad/2/ JSFiddle: https ://jsfiddle.net/00bk1zad/2/
For future, you can use FileSaver.js. 为了将来,您可以使用FileSaver.js。 Check this link with examples: https://github.com/eligrey/FileSaver.js/
通过示例检查此链接: https : //github.com/eligrey/FileSaver.js/
function txtdownload() { var textToSave = document.getElementById("editor").value; var textToSaveAsBlob = new Blob( [textToSave], {type:"application/msword"}); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = "YouKtub.doc"; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); }
<div align=center> <textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea> </div> <div> <img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0> </div> <map name=map1Map> <area coords="268,46,47,113" href="javascript:txtdownload()"> </map>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.