字符串參數

林具有功能：由於＃& 039的字符串參數

<script> 
function params(a,b,c,d) { 
// alert (c); 
var question = document.getElementById("question"); 
question.value = c; 
var answer = document.getElementById("answer"); 
answer.value = d; 
var catid = document.getElementById("catid"); 
catid.value = a; 
var qid = document.getElementById("qid"); 
qid.value = b; 
} 

<button class="modalInput" rel="#prompt" onClick="params(29,29,'In a FOX TV show, what did &#039;The OC&#039; stand for','Orange County');"><img src=/images/exclamationmark1.png title="Is there an error in this question, report it here." ></button> 


<button class="modalInput" rel="#prompt" onClick="params(29,16,'Which reality show is named after a George Orwell character','Big Brother');"><img src=/images/exclamationmark1.png title="Is there an error in this question, report it here." ></button>

第一個按鈕不工作; - 第二個確實......但是第一個確實來自使用htmlspecialchars（）的字符串......所以我認爲這會做到這一點？

你可以看到它在這裏的頁面：

http://www.quizboard-cheat.com/component/com_rquote/Itemid,176/catid,29/number_items,999/quotation_marks,0/show_author,1/show_createdate,0/show_notes,0/show_quote,1/sort_column,0/sort_order,0/view,rquotes/

來源

2013-05-19 Jonas Aabye Olsen

這不是HTML需要在那裏轉義。該HTML字符轉義序列'將產生一個單引號，所以你得到的JavaScript代碼是

params(29,29,'In a FOX TV show, what did 'The OC' stand for','Orange County');

明顯語法錯誤。你只需要使用反斜線的字符串分隔符：

<button … onClick="params(29,29,'In a … did \'The OC\' stand for',…);">

或者你需要使用引號作爲字符串分隔符 - 然後將確實需要是HTML轉義，因爲它們被用作HTML屬性的分隔符：

<button … onClick="params(29,29,&#034;In a … did 'The OC' stand for&#034;,…);">

當然，@Kirill Ivlev型是正確的。您不應該首先使用內聯事件處理程序屬性，但是unobtrusive javascript。如果你從腳本代碼中附加你的監聽器，你將不會有任何編碼問題。

來源

2013-05-19 20:17:54 Bergi

另一種考慮它的方法是：整個按鈕標記由瀏覽器_rendered_。瀏覽器將這些html實體轉換爲引號字符。之後，當用戶點擊按鈕時，包含引號標記字符的文本被髮送到javascript函數。 – 7stud

@ 7stud：現在，不完全是（用* parse *替換* render *，並且在解釋之前JS將被解析），但這個想法正確無誤... – Bergi

是的，我發佈後我的解釋並不滿意它。 – 7stud

-2

我在這裏看到不好的代碼。你爲什麼不只是通過附加事件HTML元素使用非侵入式JavaScript：

<button class="modalInput" rel="#prompt" ><img src='/images/exclamationmark1.png' title="Is there an error in this question, report it here." ></button> 

document.querySelector('.modalInput[rel=#prompt]').addEventListener(function() 
{ 
    params(29,29,'In a FOX TV show, what did &#039;The OC&#039; stand for','Orange County'); 
});

來源

2013-05-19 20:16:38

對不起 - 不過不要讓你在說什麼的任何想法： - /將在事件偵聽爲我做什麼？ –

@JonasAabyeOlsen最好的做法是將事件附加到HTML標記中，而不是將JavaScript注入到創建混亂的HTML代碼中 –

htmlspecialchars將造成問題的HTML停止字符。當屬性值被解析時，它在被傳遞給JS引擎之前會被轉換回'，並且在那個位置它會中斷字符串。你需要用\來逃避它。

來源

2013-05-19 20:17:41 Quentin

見here，你能逃脫characteres用反斜槓，是一個選項：

\'The OC\'

來源

2013-05-19 20:18:04 juanpastas

在Firebug的錯誤是：

params(29,29,'In a FOX TV show, what did 'The OC' stand for','Orange County'); 
             ^

來源

2013-05-19 20:25:40 7stud

一個更好的辦法可能是使用data attributes。不要將所有內容都塞進內聯單擊處理程序中，而不得不將其轉義爲內聯單擊處理程序，而不僅僅是爲了HTML而且還要爲JS轉義它，請將每個參數放在單獨的data-paramname屬性中。除了使轉義更易於管理之外，它還會使代碼更清晰並更易於閱讀。

<div id="questioncontainer"> 
    <button class="modalInput" rel="#prompt" data-catid="29" data-qid="29" 
    data-question="In a FOX TV show, what did &#039;The OC&#039; stand for" 
    data-answer="Orange County"><img src=/images/exclamationmark1.png 
    title="Is there an error in this question, report it here." >Q1</button> 
    <button class="modalInput" rel="#prompt" data-catid="29" data-qid="16" 
    data-question="Which reality show is named after a George Orwell character" 
    data-answer="Big Brother"><img src=/images/exclamationmark1.png 
    title="Is there an error in this question, report it here." >Q2</button> 
</div>

下面的代碼使用event delegation附加一個事件處理程序來處理所有的modalinput按鈕裏面。

(function() { // prevent our vars from leaking into the global name-space 
    "use strict"; 
    // querying the DOM is slow, we will be accessing 
    // these elements frequently, store references to them 
    var question = document.getElementById("question"), 
    answer = document.getElementById("answer"), 
    catid = document.getElementById("catid"), 
    qid = document.getElementById("qid"), 

    displayQuestion = function (evt) { 
     var target = evt.target, 
     getData = function (name) { 
      return target.getAttribute('data-' + name); 
     }; 

     if (target.className.match(/\bmodalinput\b/i)) { 
     question.value = getData('question'); 
     answer.value = getData('answer'); 
     catid.value = getData('catid'); 
     qid.value = getData('qid'); 
     } 
    }, 
    questionContainer = document.getElementById('questioncontainer'); 

    questionContainer.addEventListener('click', displayQuestion, false); 
}());

Functioning example

來源

2013-05-19 23:13:32

回答

相關問題