Вставка кода в веб-страницу не работает - PullRequest
Новая
       46

Вставка кода в веб-страницу не работает

0 голосов
/ 08 апреля 2011

Это продолжение вопроса , который я задал вчера.

У меня есть пользовательский скрипт (вроде скрипта GreaseMonkey, но для Chrome).

Идея состоит в том, чтобы добавить текстовое поле и кнопку на страницу. Затем, когда пользователь нажимает кнопку, он запускает функцию, которая делает вещи. Поэтому я вставляю текстовое поле, кнопку и функцию в страницу, но когда пользователь нажимает кнопку, консоль Chrome сообщает мне «Uncaught TypeError: объект не является функцией». Очевидно, он не видит только что введенную мной функцию, которая указана в событии 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); 
}

Что мне здесь не хватает?

Ответы [ 3 ]

2 голосов
/ 08 апреля 2011

Вы не вызываете созданную вами функцию, вы используете идентификатор, который вы даете тегу script ... Попробуйте изменить код на 

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");

и у вас будет функция fn (), которую можно вызвать

1 голос
/ 08 апреля 2011

Проблема в том, что вы пытаетесь использовать атрибут элемента onclick для привязки обработчика событий.Эти атрибуты анализируются только при первой загрузке страницы, когда функция, которую вы пытаетесь связать как обратный вызов , не существует .

Избегайте привязки обработчиков событий в элементе on* атрибутов, когда это возможно.Это называется написание ненавязчивый JavaScript .

Тем не менее, если вам абсолютно необходимо придерживаться onclick, вы можете привязать к фиктивной функции, которая ничего не делает, только поворачивается и вызывает функциючто вы вводите: 

<button onclick="wrapper()"

Где wrapper выглядит примерно так: 

function wrapper() {
    return functionThatWillEventuallyBeInjected();
}
0 голосов
/ 08 апреля 2011

Я не уверен, что вы на самом деле можете создавать script теги на лету и помещать в них контент.

Вместо этого вы можете создать тег script и изменить атрибут src для некоторого файла JS: 

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

Если вам действительно нужно выполнить код, хранящийся в строке, возможно, вы могли бы просто eval() сделать это при необходимости!

...