웹 페이지에 코드를 삽입하면 작동하지 않습니다.

Question

어제 물어 본 question의 후속 조치입니다.

사용자 스크립트 (GreaseMonkey 스크립트와 비슷하지만 Chrome 용)가 있습니다.

아이디어는 텍스트 상자와 버튼을 페이지에 추가하는 것입니다. 그런 다음 사용자가 버튼을 클릭하면 물건을 수행하는 기능이 시작됩니다. 따라서 텍스트 상자, 버튼 및 함수를 페이지에 삽입합니다. 사용자가 버튼을 클릭하면 Chrome 콘솔에 "Uncaught TypeError : object is not function"이라고 표시됩니다. 그래서 분명히 방금 주입 한 함수가 보이지 않고 단추에 대한 onclick 이벤트에 지정되어 있습니다.

initialize(); 

function initialize() { 
    var dropDown = document.getElementById("tstGlobalNavigation_ddlChooseProject"); 

    // add a textbox 
    dropDown.innerHTML = dropDown.innerHTML + "&nbsp;&nbsp;&nbsp;<input type='text' name='txtSearch' style='position:absolute;top:8px;left:800px;width:50px' >"; 

    // add a button 
    dropDown.innerHTML = dropDown.innerHTML + "&nbsp;&nbsp;&nbsp;<input type='button' name='btnSearch' value='Go' onclick='fn()' style='position:absolute;top:8px;left:860px;width:35px'>"; 

    addScript("var obj = document.getElementById('txtSearch'); " 
    + "if (obj != null) { " 
    + " var incidentId = document.getElementById('txtSearch').value; " 
    + " var currentURL = location.href; " 
    + " var splitResult = currentURL.split('/'); " 
    + " var projectId = splitResult[4]; " 
    + " location.href = 'http://dev.myApp.com/ProductTeam/' + projectId + '/Incident/' + incidentId + '.aspx'; " 
    + " }" 
    , "fn"); 
} 

function addScript(contents, id) { 
    var head, script; 
    head = document.getElementsByTagName('head')[0]; 
    script = document.getElementById(id); 
    if(script != undefined) { 
    head.removeChild(script); 
    } 
    script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.id = id; 
    script.innerHTML = contents; 
    head.appendChild(script); 
} 

내가 여기 실종 무엇 :

그래서 나는이 같은 코드가?

Answer 1

...

,536에 코드를 변경해보십시오

addScript("function fn() { var obj = document.getElementById('txtSearch'); " 
    + "if (obj != null) { " 
    + " var incidentId = document.getElementById('txtSearch').value; " 
    + " var currentURL = location.href; " 
    + " var splitResult = currentURL.split('/'); " 
    + " var projectId = splitResult[4]; " 
    + " location.href = 'http://dev.myApp.com/ProductTeam/' + projectId + '/Incident/' + incidentId + '.aspx'; " 
    + " } }" 
    , "fn"); 

및

Answer 2

실제로는 script 태그를 만들어 콘텐츠를 넣을 수 있는지 잘 모르겠습니다.

대신 스크립트 태그를 생성하고 일부 JS 파일에 src 속성을 수정할 수 :

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "path/to/your/javascript.js"; 
document.body.appendChild(script); 

을 당신이 정말로 문자열에 저장되어있는 코드를 실행해야하는 경우, 아마 당신은 단순히 eval()이 필요한 수있을 때!

Answer 3

문제는 onclick 요소 특성을 사용하여 이벤트 처리기를 바인딩하려고하는 것입니다. 이러한 속성은 페이지가 처음로드 될 때만 구문 분석되며 콜백으로 바인딩하려는 함수 은 존재하지 않습니다..

가능할 때마다 on* 요소의 이벤트 처리기를 바인딩하지 마십시오. 이것은 쓰기 unobtrusive JavaScript이라고합니다. 당신이 절대적으로 onclick을 사용하여 고수해야하는 경우, 당신은 아무것도하지 않는 더미 기능에 결합하지만 돌아 서서 당신이 주입 기능을 호출 할 수 있습니다 말했다

: wrapper는 다음과 같은 형태

<button onclick="wrapper()" 

: 당신은, 당신은 스크립트 태그에 부여 ID를 사용하고 생성 된 함수를 호출하지 않는

function wrapper() { 
    return functionThatWillEventuallyBeInjected(); 
}