Как передать значение href в javascript и использовать его в window.location при нажатии гиперссылки?

Question

У меня есть два типа гиперссылок. При первом щелчке значение href передается функции, но его значение никогда не используется в window.location! (Потому что он открывает ссылку в сафари вместо iphone webApp). Когда вторая гиперссылка называется значением href, никогда не передается функции, и снова значение href открывается в сафари вместо webApp! Может ли кто-нибудь помочь мне передать значение функции href и использовать его в window.location вместо того, чтобы открывать его на сафари. Заранее спасибо.

<li class="x"><a id="1" title="1" href="./test.php?try" onclick="myFunction(location.href=this.href);"> <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">FIRST</div></a></li> 
<li class="x"><a id="2" title="2" href="./test.php" onclick="myFunction(location.href=this.href+'?try&appid='+currentID;return false;);"> <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">SECOND</div></a></li> 


<script> 
function myFunction(myLink) { 

alert("hello"+myLink); 

    window.location = myLink; 
} 
</script> 

Answer 1

Есть несколько вещей в игре здесь. Как указывает fiprojects, лучше не делать встроенный JavaScript (некоторые из причин - это только личные предпочтения). Вы закончите повторять себя и затруднять поддержание своего кода (among other reasons). Лучше всего использовать Event Listeners (ссылка w3schools, не всегда лучший ресурс, но этого достаточно для этого примера). Это очень просто, если вы используете библиотеку JavaScript (jQuery). Но если вы попросили JavaScript-решение, я расскажу, как это сделать в моем ответе.

Во-первых, давайте форматировать код, чтобы сделать его легче читать:

<li class="x"> 
    <a id="1" title="1" href="./test.php?try" class="myLink"> 
     <img id="Button1" src="http://placehold.it/360x240"> 
     <div class="caption" style="color:red">FIRST</div> 
    </a> 
</li> 
<li class="x"> 
    <a id="2" title="2" href="./test.php" class="myLink"> 
     <img id="Button2" src="http://placehold.it/360x240"> 
     <div class="caption" style="color:red">SECOND</div> 
    </a> 
</li> 

Я только сделал пару изменений здесь. Я удалил JavaScript onclick. Я создал образ заполнителя (только для моих собственных целей, поскольку у меня нет ваших изображений, вы захотите разместить свои изображения там). И, наконец, я добавил class="myLink" на ваш <a>. Это позволит нам более легко ссылаться на ваши ссылки с нашим слушателем событий.

Для JavaScript

<script> 
    var linksArray = document.getElementsByClassName("myLink"); 

    var myFunction = function(event) { 
     event.preventDefault(); 
     var href = this.getAttribute("href"); 
     alert('hello ' + href); 
     window.location = link; 
     return false; 
    }; 

    for (var i = 0; i < linksArray.length; i++) { 
     linksArray[i].addEventListener('click', myFunction, false); 
    } 
</script> 

Первая строка создает массив с любыми элементами, которые имеют class="myLink". Затем мы проверим этот массив и добавим прослушиватель событий. Прежде чем мы начнем цикл, нам нужно создать вашу функцию.

Чтобы предотвратить действие по умолчанию, которое происходит, когда пользователь нажимает на ссылку, нам необходимо прекратить распространение. Поэтому мы будем использовать event.preventDefault(). Я также добавил return false; к функции. Оба предназначены для того, чтобы делать то же самое.

Вместо передачи переменной мы будем использовать this для получения справки. Мы также будем использовать функцию JavaScript getAttribute и передать href. Это повлечет за собой стоимость href.

Наконец, мы перебираем наш linksArray. Мы добавляем слушателя событий click и назначаем myFunction как callback. Теперь, когда пользователь нажимает на одно из изображений, эта функция срабатывает.

И here's a working example on JSFiddle.

Answer 2

Вы пытаетесь запустить, прежде чем ходить ...

Ваш Javascript необходимо много больше работы. Избегайте размещения javascript внутри html. Таким образом, избежать таких вещей, как:

onclick="myFunction(location.href=this.href);" 

Я хотел бы использовать JQuery (библиотеку JavaScript), как это поможет в долгосрочной перспективе, поскольку это приведет вас быть кросс-браузер совместимым.

Ваши метки "id" должны быть алфавитными или буквенно-цифровыми, а не цифровыми. Таким образом, id = "1" является (я считаю) незаконным, даже если он работает.

На самом деле ... Извините .... но чем больше я думаю об этом, вам действительно нужна хорошая книга для продвижения вашего javascript, прежде чем пытаться сделать то, что вы хотите сделать, иначе вы не поймете ограничений или рисков для некоторых вашей работы.

Использование JQuery (который сам по себе написан на JavaScript) вы можете изменить URL с помощью

$("#link1").click(Change1); 
$("#link2").click(Change2); 

function Change1() 
{ 
$("#link1").href("./test.php?try"); 
} 

function Change1() 
{ 
$("#link2").href("./test.php?try"); 
} 

выше будет работать, если ваши теги идентификатор были переименованы из ид = «1» в ид = «link1» и ID = "2" в ид = "LINK2"

к сожалению, я не поможет больше, чем это ...