简体   繁体   中英

How to execute function stored as a string without eval()

Let me preface this question by saying there may be a completely different solution than my title so let me tell you what I am after entirely.

Basically I have a series of menu links. The href in all the links are storing jQuery functions, not URL's (to control turn.js book script). So one of the href 's may look like so:

<li id="menu-item-68" class="home menu-item menu-item-type-custom menu-item-object-custom menu-item-68">
  <a href="$('#primary').turn(‘page’,1);"></a>
</li>

The request is simple...on click() of a menu item i need to execute the contents of the href . My first thought was to run through each link and store a temp string of the href and then use eval() but that looks to be a bad option from what I read.

So, how can I execute the contents of my href quickly and safely?

There are a few solutions here. You might want to look into using something like Backbone which provides something called routers that would aid you in navigation.

Or to hack up something similar, set each of your href tags to point to a new # anchor:

<a href="#2">next page</a>

and then attach a listener to the hashchange event. When the event fires, the user has clicked on the link. Then access the hash window.location.hash and use that as the argument to a function which does what you need it to do.

$(window).on('hashchange', function(event){
    $('#primary').turn('page', window.location.hash.slice(1));
}

The slice is there since window.location.hash includes the # character.


EDIT

I notice you updated saying you use wordpress and you're editing out the http:// part of your URLs. If you're using the hashchange event you don't need to since href="#2" is the same as href="http://mysite.post.com/this_post/#2"

How about use the onclick event?

<a onclick="function(){$('#primary').turn('page', 2); return false;}" href="#">Click me!</a>

Alternately, since you're using JQuery, you could .bind() the event:

<script>
    $('a.clickable').bind('click', function(e){
         var pageNum = $(this).attr('data-page');
         $(#primary).turn('page', pageNum);
         return false;
    });
</script>
<body>
   <a class='clickable' data-page='2' href='#'>Click me!</a>

Alternately, since you only have access to the href attribute, you COULD do this, which is the easy way out:

 <a href="javascript:$('#primary').turn('page', 2)">Click me!</a>

Can't you simply simulate a click event on the links in that case? In other words, if you already have jquery loaded $("a#identifier").click() . In your current scenario that seems to be the easiest way.

I've a similar issue and solved it like this:

In your script, define a function like:

$.fn.DoSomething=function (MyOption){ window.alert(MyOption); };

And in your link href call the function like javascript:$.fn.DoSomething('Hello');

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM