是否可以在onclick中獲得href？

Question

我需要在DOM中的onclicks函數內部獲取鏈接。

鏈接是：

<div class="producto_no_hover" onclick="window.location.href='http://kenayhome.com/6279-dixon-cabecero-tapizado.html'" style="cursor: pointer; width: 273px; height: 227px; margin-top: 20px; overflow: hidden; background: url(http://img1.kenayhome.com/13268/dixon-cabecero-tapizado.jpg) 50% 50% / cover no-repeat;">
    <div class="comprar_lupa" style="overflow: hidden; opacity: 0; width: 0px;">
        <div class="colores">
            <ul>
                <li><img src="http://img3.kenayhome.com/img/co/2332.jpg" alt="Blanco" width="22" height="22"></li>
                <li><img src="http://img3.kenayhome.com/img/co/2333.jpg" alt="Crema" width="22" height="22"></li>
            </ul>
        </div>
        <div style="float:right; margin: 0px 5px">
            <a class="boton_add_cart comprar" href="http://kenayhome.com/carro-de-la-compra?add=&amp;id_product=6279&amp;token=3949f34ffcc8206453a2425d90f8e04a" rel="ajax_id_product_0" title="Add to cart">
            </a>
        </div>
        <a href="http://kenayhome.com/6279-dixon-cabecero-tapizado.html">
            <div class="lupa"></div>
        </a>
    </div>
    <div class="tam_producto" style="height: 227px; overflow: hidden;">
        <div class="datos_producto" style="padding: 6px 0px 0px 3px;">
            <div class="precios">
                <div class="precio_anterior"></div>
                <div class="frase_precio">En Kenay</div>
                <div class="precio_actual">218,00 €</div>
            </div>
        </div>
    </div>
    <div class="mas_datos_producto" style="width: 273px; height: 75px; overflow: hidden;">
        <div class="nombre_producto">
            <h3>Dixon cabecero tapizado</h3>
        </div>
        <div class="description" style="display: none;">
            Consigue&nbsp;un&nbsp;  estilo nórdico  &nbsp;en tu dormitorio con el&nbsp;  cabecero tapizado capitone&nbsp;  Dixon  .&nbsp;  Este&nbsp;  cabecero de cama&nbsp;  está tapizado en...
        </div>
    </div>
</div>

在我的JS中，我嘗試了以下操作，但無法正常工作。

elements = document.getElementsByClassName("producto_no_hover");

var array = []

for (var i = 0; i < elements.length; i++) {
    array.push(elements[i].onclick=function(){window.location.href});
    console.log(array);
}

如何定位此onclick href？

Answer 1

好的，您有幾個語法錯誤，但是該代碼筆應該可以完成您嘗試做的事情，盡管我不知道為什么將元素數組放入第二個數組。

 elements = document.getElementsByClassName("product_no_hover"); var array = []; for (var i = 0; i < elements.length; i++) { elements[i].onclick= function(){ window.location.href = "http://stackoverflow.com/questions/28199052/is-it-possible-to-get-a-href-inside-an-onclick"; }; array.push(elements[i]); } 

 <div class="product_no_hover">Lorem Ipsum</div> <div class="product_no_hover">Lorem Ipsum</div> <div class="product_no_hover">Lorem Ipsum</div> <div class="product_no_hover">Lorem Ipsum</div> 

（該代碼在Codepen上不起作用，因為無法將Stackoverflow加載到iframe中。）

但是我想問你為什么要用這種方式。 當您可以改用錨標記時，建議不要使用JavaScript進行重定向。 是否有任何理由必須進行JavaScript重定向？ 您為什么不能只切換到錨標記並在html中添加href，又或者切換到錨標記，然后使用JS添加href，如果更好的話？

Answer 2

您可以通過將函數體轉換為toString ，然后使用substring獲取所需的內容來實現此目的，例如：

var elements = document.getElementsByClassName("producto_no_hover");

var array = []

for (var i = 0; i < elements.length; i++) {
    var functionBody = elements[i].onclick.toString();
    array.push(functionBody.substring( functionBody.indexOf("='") + 2, functionBody.lastIndexOf("'") ));
    console.log(array); // will return ["http://kenayhome.com/6279-dixon-cabecero-tapizado.html"]
}

indexOf和lastIndexOf將返回搜索關鍵字的indexes ，在這種情況下，我們將去除

='..your url..'
^^            ^

jsFiddle演示