2014-01-25 37 views
0

這一切如何應該當iFrameOn函數運行工作:查找對應的對象 - 獲取評論系統的工作?

  1. 將所有的iFrame的的designMode上
  2. 找到三個「按鈕」(「A」鏈接元素) - 當點擊時影響其相應的iFrame - 這取決於它的類名
  3. 把那些「按鈕」成多維數組/對象即target.rtfID.x
  4. 每當一個「按鈕」被點擊時,通過對象找到其對應的iFrame和發送的iFrame的id作爲另一個功能的參數離子。

但是,目前,只要有任何按鈕被點擊,它們都會影響相同的iFrame。我意識到這可能是由於我使用循環,但我無法弄清楚如何使它的一切工作。控制檯中沒有錯誤。

function iFrameOn() { 
    var rtfContainer, rtContainer, richTxt, richTxtId, 
     rtf = document.querySelectorAll('div > form > iframe'), //Rich Text Field 
     newPost = document.getElementById('richTextField').contentDocument.body, 
     target = {}, rtfIndex = 0; 
    //Turn iFrames On 
    while (rtfIndex < rtf.length) { 
     rtfID = rtf[rtfIndex].id; 
     if (rtf[rtfIndex].contentDocument.designMode != 'On') { 
      rtf[rtfIndex].contentDocument.designMode = 'On'; 
     } 
     newPost.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>"; 
     newPost.addEventListener('blur', function() { 
      if (newPost.innerHTML == '') { 
       newPost.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>"; 
      } 
     }, false); 
     document.getElementById('richTextField').contentWindow.addEventListener(
      'focus', 
      function() { 
       if (newPost.innerHTML == "<i style=\"color:#DDDDDD;\">What's up?</i>") { 
        newPost.innerHTML = ''; 
       } 
      }, 
      false 
     ); 
     rtContainer = rtf[rtfIndex].nextElementSibling; //Next Element Sibling should be a div 
     console.log('rtContainer is: '+rtContainer); 
     richTxt = rtContainer.childNodes; 
     console.log('richTxt is: '+richTxt); 
     for (var i = 0; i < richTxt.length; i++) { 
      if (richTxt[i].nodeType != 1 || 
       (richTxt[i].nodeType == 1 && 
        (richTxt[i].className == 'submit_button sbmtPost' 
         || richTxt[i].className == "") 
       ) 
      ) { 
       continue; 
      } 
      richTxtId = richTxt[i].id; 
      target.rtfID = {}; 
      switch (richTxt[i].className) { 
       case 'richText bold': 
        if (target.rtfID.bold != richTxtId) { 
         target.rtfID.bold = richTxtId; 
         console.log(target.rtfID.bold+' is associated with: '+rtfID); 
        } 
        break; 
       case 'richText underline': 
        if (target.rtfID.underline != richTxtId) { 
         target.rtfID.underline = richTxtId; 
         console.log(target.rtfID.underline+' is associated with: '+rtfID); 
        } 
        break; 
       case 'richText italic': 
        if (target.rtfID.italic != richTxtId) { 
         target.rtfID.italic = richTxtId; 
         console.log(target.rtfID.italic+' is associated with: '+rtfID); 
        } 
        break; 
       default: 
        console.log('Error with commenting system!'); 
        break; 
      } 
     } 
     var obj = target.rtfID; 
     for (var prop in obj) { 
      if (obj.hasOwnProperty(prop)) { 
       console.log("prop: " + prop + " value: " + obj[prop]); 
       switch(prop) { 
        case 'bold': 
         document.getElementById(obj[prop]).addEventListener(
          'click', 
          function() { 
           bold(obj[prop]); 
          }, 
          false 
         ); 
         break; 
        case 'underline': 
         document.getElementById(obj[prop]).addEventListener(
          'click', 
          function() { 
           Underline(obj[prop]); 
          }, 
          false 
         ); 
         break; 
        case 'italic': 
         document.getElementById(obj[prop]).addEventListener(
          'click', 
          function() { 
           Italic(obj[prop]); 
          }, 
          false 
         ); 
         break; 
        default: 
         console.log('Error in for...in loop'); 
       } 
      } else {console.log('error');} 
     } 
     rtfIndex++; 
    } 
} 
+0

而不必一個簡單的方法來測試/檢查,我會打賭你的問題是因爲你不應該在循環中定義函數 - 它會導致這樣的問題。內部函數繼續訪問外部範圍,因此在執行時,它們將抓取循環中最後一個iframe的信息。您可以通過將循環中變化的值傳遞給一個函數來解決這個問題,該函數本身會返回您想要的函數。 –

+0

這似乎是問題所在。任何方式,我可以避免在循環內定義函數?我這樣做的唯一理由是因爲我的富文本函數帶有參數,我不能將參數放入addEventListener方法中。編輯:說太快了。我無法在iFrame之間來回切換。現在它隻影響它找到的最後一個iFrame。 – Azrael

回答

0

你可以做這樣的事情:

function createBolder (val) { 
    return function() { 
     bold(val); 
    }; 
} 

document.getElementById(obj[prop]).addEventListener(
    'click', 
    createBolder(obj[prop]), 
    false 
); 

,或者如果你真的想保持的東西在線:

document.getElementById(obj[prop]).addEventListener(
    'click', 
    (function (val) { 
     return function() { 
      bold(val); 
     }; 
    }(obj[prop])), // This function call executes immediately (i.e., while still 
        // going through the loop, so the current value of obj[prop] 
        // will be stored inside this function with its own local copy 
        // rather than using the value of obj and prop by the time 
        // the function is executed (probably the completion of the loop)) 
    false 
);