JavaScript에서 딜레마 도피

StackOverflow https://stackoverflow.com/questions/261985

  •  06-07-2019
  •  | 
  •  

문제

나는 다음이있다 

var id='123';

newDiv.innerHTML = "<a href=\"#\" onclick=\" TestFunction('"+id+"', false);\"></a>";

어느 것이 렌더링됩니다 <a href="#" onclick="return Testfunction('123',false);"></a> 내 html에서.

내가 가진 문제는 메소드 테스트 기능을 호출하고 내 함수 steptwo (String, boolean)에서 문자열 매개 변수로 사용하고 싶다는 것입니다.

<a href="#" onclick="StepTwo("TestFunction('123',false)",true)"></a>

TestFunction이 여기서 문자열인지 주목하십시오 (Eval을 사용하여 StepTWO 내에서 실행됨).

JS를 다음과 같이 포맷하려고했습니다.

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(\"TestFunction('"+id+"', false);\",true)\"></a>";

그러나 이것이 내 IDE에서, 렌더링 된 HTML에서는 믿음을 넘어서는 것처럼 보이지만, 그것은 내 IDE에서 맞습니다.

누군가가 나를 올바른 방향으로 가리킬 수 있다면 감사하겠습니다. 감사!

도움이 되었습니까?

해결책

"대신 "를 사용해보십시오.

newdiv.innerhtml = "

다른 팁

인터넷에서 가장 큰 자본 실패 중 하나는 문자열을 결합하여 JavaScript로 HTML을 만드는 것입니다. 

var mya = document.createElement("a");
mya.href="#"; 
mya.onclick = function(){ 
    StepTwo(function(){ 
        TestFunction('123', false ); 
    }, true );   
};
newDiv.innerHTML = ""; 
newDiv.appendChild(mya);

이것은 멋진 탈출 자료의 필요성을 제거합니다.

(아마도 'Onclick'을 다르게해야하지만, 이것이 효과가 있어야합니다. 나는 모든 것을 수행하기 위해 jQuery 코드를 사용하지 않기 위해 열심히 노력하고 있습니다).

그녀는 내가 jQuery에서 어떻게 할 것인지 : 

jQuery(function($){ 

  var container = $("#container"); 
  var link = document.createElement("a"); /* faster than  $("<a></a>"); */
  $(link).attr("href", "Something ( or # )" ); 
  $(link).click( function(){ 
       var doStepTwo = function()
       { 
            TestFunction('123', true ); 
       };
       StepTwo( doStepTwo, false );  /* StepTwo -> doStepTwo -> TestFunction() */
  });
  container.append(link); 
});

JavaScript에서 문자열을 결합하는 것에 대한 변명은 없습니다.

그 모든 것뿐입니다 추가하다 HTML의 오버 헤드는 DOM 구조로 다시 구문 분석하고 추가하다 XSS 기반 파손 HTML의 잠재력. 조차 사랑하는 구글 광고 스크립트 중 일부 에서이 문제를 해결하고 서사시 실패 많은 경우에 내가 본 것 (그리고 그들은 그것에 대해 알고 싶지 않습니다)

JavaScript를 이해하지 못합니다 유일한 변명입니다 아니다 좋은 것.

당신은 사용해야합니다 &quot; ~ 아니다 " 또는 \" HTML 문자열 내부에는 이중 인용문이 인용됩니다.

NewDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(&quot;TestFunction('"+id+"', false);&quot;,true)\"></a>";

이 작업을 수행하는 더 좋은 방법이있을 것입니다. eval() 뒤로 물러서서 다른 해결책을 찾아야합니다.

당신은 평가가 여기서 옳은 일이라고 주장합니다. 난별로 확신이 들지 않아.

이 접근법을 고려 했습니까?

<a href="#" onclick="StepTwo(TestFunction,['123',false],true)"></a>

그리고 당신의 steptwo 기능에서

function StepTwo(func,args,flag){
    //do what ever you do with the flag
    //instead of eval use the function.apply to call the function.
    func.apply(args);
}

DOM 메소드를 사용하여 A 요소를 작성하고 클릭 이벤트에 첨부 할 수 있습니다.

JavaScript 프레임 워크 (유비쿼터스 jQuery와 같은)는 이것을 훨씬 쉽게 만듭니다.

가장 큰 문제는 Eval을 사용하는 것입니다. 대체 솔루션을 찾는 것이 거의 항상 더 나은 잠재적 인 문제로 이어집니다.

당신의 즉각적인 문제는 당신이 실제로 가지고있는 것이

<a href="#" onclick="StepTwo("></a>

다음과 같이 " OnClick 속성이 시작된 후 닫습니다. "다른 사람들이 제안한대로 사용하십시오. 그리고 평가를 사용하지 마십시오.

  1. 당신은 당신의 "와 '를 번갈아 가야합니다.

  2. Javascripts 유연성 타이핑으로 인해 123에 따옴표가 필요하지 않을 수도 있습니다. 따옴표없이 전달하지만 testfunction 내에서 문자열로 취급하십시오.

안녕하세요 여러분, 모든 답변에 감사드립니다. 나는 quot; 가장 잘 작동하는 것 같습니다.

더 많은 평판을 얻으면 여러분들에게 투표를 할 것입니다!

평가 ()와 관련하여, 질문에서 볼 수있는 것은 개발중인 응용 프로그램의 매우 작은 스냅 샷입니다. 나는 평가의 고통을 이해하지만, 이것은 현재 상황에 대한 올바른 선택 인 백만 상황에서 그 중 하나입니다.

이러한 기능이 무엇을하는지 볼 수 있다면 더 잘 이해 될 것입니다 (StackoverFlow의 매우 일반적인 이름을 부여했습니다).

다시 한 번 감사드립니다!

가장 좋은 방법은 요소를 만드는 것입니다 document.createElement,하지만 당신이 기꺼이하지 않으면, 당신이 할 수있을 것 같아요 <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> 또는 사용 &quot;.

코드에서 :

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo('TestFunction(\'"+id+"\', false);\',true)\"></a>";

작동하지 않으면 변경해보십시오. "\'" 에게 "\\'".

"문자는 HTML 태그의 속성을 열고 닫는 데 사용됩니다. 속성 값에서 사용하면 브라우저는이를 닫기로 이해합니다.

예시:<input type="text" value="foo"bar"> 결국 존재하게 될 것입니다 <input type="text" value="foo">.

<a href="#" onclick="StepTwo('TestFunction(\'123\', false)', true)">...</a>

나는 이것이 지금 olda '오래된 것임을 알고 있지만, Eval을 사용할 때 탈출 된 문자열에 문제가있는 사람이 있다면 (그리고 당신은 절대적으로 평가를 사용해야한다면) 문제를 피할 수있는 방법이 있습니다.

var html = '<a href="#\" onclick=" TestFunction(\''+id+'\', false);"></a>';
eval('(function(div, html){div.innerHTML = html;})')(newDiv, html);

그래서 여기서 무슨 일이 일어나고 있습니까?

  1. eval 두 매개 변수를 포함하는 함수를 만듭니다. div 그리고 html 그리고 그것을 반환합니다.
  2. 함수는 평가 함수의 오른쪽에있는 매개 변수로 즉시 실행됩니다. 이것은 기본적으로 iife와 같습니다.

이 경우

var myNewMethod = eval('(function(div, html){div.innerHTML = html;})');

기본적으로 다음과 같습니다.

var myNewMethod = function(div, html){div.innerHTML = html;}

그리고 우리는 단지 이것을하고 있습니다 :

myNewMethod(newDiv, html); //where html had the string containing markup

나는 평가를 사용하지 않는 것이 좋습니다. 피할 수 없거나 모든 입력을 제어하고 주입의 위험이 없으면 문자열 탈출이 문제가되는 경우 도움이됩니다.

나는 또한 사용하는 경향이 있습니다 Function, 그러나 더 안전하지는 않습니다. 다음은 내가 사용하는 스 니펫입니다.

    var feval = function(code) {
    return (new Function(code))();
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top