How to click on a link and call function on the page that link go to as the same time?

Question

• index.html - has menus category1 , category2 , category3
• product.html - has function changeIframe([category1 | category2 | category3]);

When I click a menu on "index.html" page, a link will bring me to "product.html" page then call function changeIframe(var) immediately. The changeIframe(var) function will compare $var (value of var is followed by the name of menu that I clicked) and then change content in this page. How can I do something like this?

Answer 1

Just an Idea, pass the category as Url Hash.

index.html:

<a href="product.html#category1">Category 1</a>
<a href="product.html#category2">Category 2</a>
<a href="product.html#category3">Category 3</a>

product.html

var category = (location.hash).replace('#','');
changeIframe(category); //call function

If only you do need it using javascript. It'll be more easier if you using server-side script.

Answer 2

Add the categories as hashtag on your link and read that out.

<a href="product.html#category1">menu link</a>

In your product page

window.onload = function(){

    var category = (window.location.hash).replace("#",'');;
    alert(category);
    // changeIframe(category)

}

And remove the "#" like @Charlie shows.

Answer 3

index.html

<a href="product.html#category1">category 1</a>
<a href="product.html#category2">category 2</a>
<a href="product.html#category3">category 3</a>

product.html

$(document).ready(function(){
    var item =  toLowerCase((document.location.hash)).replace('#','');
    if(/category[1-3]/i.test(item)){
        changeIframe(item);
    }else{
        changeIframe(defaultitem);
    }
});

if you are using php

index.html

<a href="product.html?item=category1">category 1</a>
<a href="product.html?item=category2">category 2</a>
<a href="product.html?item=category3">category 3</a>

product.html

<script>
<?php
if(isset($_GET['item']) && preg_match("/category[1-3]/", $_GET['item'])){
    echo "changeIframe(" . $_GET['item'] .");";
}else{
    echo "changeIframe(defaultitem);";
}
</script>

Answer 4

在index.phtml页面上，当您单击链接传递菜单名称作为查询字符串时，当您到达product.phtml时，调用$（document）.ready函数上的changeiframe（var）

Answer 5

One way of going about it using using PHP (if you have a server that supports it).

If you end up getting PHP setup, here is one option:

index.php:

<a href="product.php?cat=1">Category 1</a>
<a href="product.php?cat=1">Category 2</a>
<a href="product.php?cat=1">Category 3</a>

then use this code with your Javascript in product.php to get the category passed:

changeIframe(<?php $_GET['cat'] ?>)

Answer 6

pass link as query string product.html?category=1 and can use this code in that page

  function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;

    }



    $(document).ready(function() {   

   var id = getUrlVars()["category"];
    changeIframe(var);
    });