사용자 정의 data-attr에서 함수를 호출 하시겠습니까?

Question

우리가 작업하고있는 현재 CMS가 주어지면 사용자 지정 데이터 속성 내에서 함수를 호출해야합니다. 아래처럼 함수로 데이터 속성의 내용을 호출 할 수 있습니까? 간단한 예 : 나는 위의 단지 점점 내용을 믿고 쓸 때 실제로는 아무것도 실행하지

설정

<button data-function="alert('hello world')">Run Function</button> 

실행

$('button').attr('function'); 

.

이것이 가능합니까?

Answer 1

당신은 데이터 속성에서 Function를 만들 수 있습니다 : 당신이 코드를 실행하려면

// create 
var funcStr = $('button').data('function'); 
var f = new Function(funcStr); 

// invoke 
f(); 

이 MDN

Answer 2

를 참조하십시오, 당신은 eval를 호출해야합니다. 또한 속성의 전체 이름을 사용하거나 .data()을 사용해야합니다.

eval($('button').attr('data-function')); 

또는

eval($('button').data('function'); 

Answer 3

당신은 항상 eval 기능을 사용할 수 있습니다.

eval($('button').attr('data-function')); 

Answer 4

이 기능이 알려진 경우 다른 접근 방법입니다.

 $(document).ready(function() { 
 
     $('button').click(function() { 
 
     var functionObject = JSON.parse($('button').attr('data-function')); 
 
     window[functionObject.name].apply(window, functionObject.arguments); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button data-function='{"name": "alert", "arguments" : ["hello world"]}'>Run Function</button>

그것은 data-function 속성에서 JSON 문자열을 구문 분석

. name이 제공하는 함수를 window 객체 ( eval 제외)를 사용하여 호출하고 apply을 사용하여 함수에 인수를 전달합니다.