Question

当访问者在div中单击

时如何执行javaScript url

就像这个例子：

＆＃13;

<html>
<head>
<meta charset="UTF-8">
<style>
.youtube .play,.youtube img{cursor:pointer;position:absolute}
.youtube{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}
.youtube embed,.youtube iframe,.youtube object{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}
.youtube img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}
.youtube img:hover{-webkit-filter:brightness(75%)}
.youtube .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;background:url(//i.imgur.com/TxzC70f.png) no-repeat}
</style>
</head>

<body>

<div class="youtube" data-id="YQHsXMglC9A"></div>
    
</body>

<script>
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */

    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });

    function labnolThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function labnolIframe() {
        var iframe = document.createElement("script");
        iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }

</script>

</html>

＆＃13;

喜欢这张图片

image

Html代码+ javascript ：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="a" style="background-color:#999; height:90px; width:250px;" >Click here</div>

</body>
</html>

Javascript ：

<script type="text/javascript">
document.write("Hello World!");
</script>

或：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

当访问者在div中点击时，如何运行javaScript url？

Answer 1

喜欢这样的东西会这样做......

＆＃13;

function clickMe() {
	alert("You clicked me!")
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="clickMe()" >Click here</a></div>

</body>
</html>

＆＃13;

Answer 2

首先，您应该尝试运行一个函数，而不是尝试运行脚本。例如

＆＃13;

function test(){
  document.write("Hello World!")
}

function test2(){
  document.getElementById("output").innerHTML = "Hello World!"
}

＆＃13;

<div onclick="test()">
  <p> Click me </p>
</div>
<div onclick="test2()">
  <p> Click me (won't remove screen) </p>
</div>
<div id="output">

</div>

＆＃13;

单击第一个div将调用test（）函数。但是，此功能会覆盖屏幕上的所有内容，而不是您想要的内容。

第二种方法不会这样做，而是将第三个div的内容设置为＆＃34; Hello World！＆＃34;

Answer 3

我相信你想在点击div时运行一个JavaScript函数。您只需要在onclick()标记中添加<div>事件并声明该功能。所以你的div会是这样的：

<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="writeFunction();">Click here</div>

该函数与您在onclick上声明的名称相同：

<script type="text/javascript">

function writeFunction(){

document.write("Hello World!");

}
</script>

由于你已经使用了document.write并且我保留了它，它没有显示你在图片中说明的结果，你的div正在消失。为了按照您的想象进行操作，您必须添加一个最初为空的<p>元素：

<p id='text'></p>

然后让你的函数设置它的文本，如下所示：

document.getElementById('text').innerHTML = "Hello World!";

您可以在此处了解详情：https://www.w3schools.com/jsref/event_onclick.asp

当访问者在div中单击时调用javaScript URL

3 个答案: