我想動態追加腳本在onclick或onkeypress事件觸發後的iframe

Question

我有一個輸入，它有一個動態值，因爲它是可編輯的。 Onkeypress在textarea或之後onclick點擊btn id時觸發事件，它應該在另一個iframe上添加輸入值，因爲輸入是可更改的，所以它是動態的。因此，如果沒有頁面加載，iframe的腳本innerHTML應該刷新。我做了一些事情，但沒有成功。

HTML

<textarea id="inpt" cols="30" rows="10"></textarea> 
<div><input type="submit" value="append" id="btn" style="width:60px;height:20px;background:grey"></div><br> 
<iframe id="fr" name="fr" style="width:300px;height:300px;"></iframe> 

JS

  var _script = document.createElement('script'); 
      _script.type = 'text/javascript'; 
      var iFrame = document.getElementById('fr'), 
      iFrameBody, 
      t = document.getElementById("inpt"), 
      btn = document.getElementById('btn'); 

     function injectJS(content, val) { 
      if (iFrame.contentDocument) 
      { 
      iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; 
      } 
      else if (iFrame.contentWindow) 
      { 
      iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; 
      } 
      iFrameBody.appendChild(content); 
      content.innerHTML = val; 
      console.log(iFrameBody);  
     } 

     //t.onkeypress = injectJS(_script, t.value); 
     btn.onclick = injectJS(_script, t.value); 

而這裏的工作演示。 http://jsfiddle.net/n5fdywb9/

Answer 1

試試這個。它應該工作。

var _script = document.createElement('script'); 
      _script.type = 'text/javascript'; 
      var iFrame = document.getElementById('fr'), 
      iFrameBody, 
      t = document.getElementById("inpt"), 
      btn = document.getElementById('btn'); 

     function injectJS(content, val) { 
      if (iFrame.contentDocument) 
      { 
      iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; 
      } 
      else if (iFrame.contentWindow) 
      { 
      iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; 
      } 
      iFrameBody.appendChild(content); 
      content.innerHTML = val; 
      console.log(iFrameBody);  
     } 

     //btn.onclick = injectJS(_script, t.value); 
     btn.addEventListener("click",(function(){injectJS(_script, t.value);}),false); 

Answer 2

您不能將文本附加到script標記，並且需要將onclick分配給元素本身。

如果onclick未在HTML中關聯，則會在加載頁面時觸發onclick事件。

我已對Fiddle進行了更改。

Answer 3

通用腳本的addEvent ..

 <textarea id="inpt" cols="30" rows="10"></textarea> 
<div><input type="submit" value="append" id="btn" style="width:60px;height:20px;background:grey"></div><br> 
<iframe id="fr" name="fr" style="width:300px;height:300px;"></iframe> 
<script type="text/javascript"> 
document.getElementById('inpt').innerHTML = "document.write('awesome')"; 
if (typeof addEventListener !== "undefined") { 
    addEvent = function (obj, evt, fn) { 
     obj.addEventListener(evt, fn, false); 
    }; 

    removeEvent = function (obj, evt, fn) { 
     obj.removeEventListener(evt, fn, false); 
    }; 
} else if (typeof attachEvent !== "undefined") { 
    addEvent = function (obj, evt, fn) { 
     var fnHash = "e_" + evt + fn; 

     obj[fnHash] = function() { 
      var type = event.type, 
       relatedTarget = null; 

      if (type === "mouseover" || type === "mouseout") { 
       relatedTarget = (type === "mouseover") ? event.fromElement : event.toElement; 
      } 

      fn.call(obj, { 
       target: event.srcElement, 
       type: type, 
       relatedTarget: relatedTarget, 
       _event: event, 
       preventDefault: function() { 
        this._event.returnValue = false; 
       }, 
       stopPropagation: function() { 
        this._event.cancelBubble = true; 
       } 
      }); 
     }; 

     obj.attachEvent("on" + evt, obj[fnHash]); 
    }; 
} 
var _script = document.createElement('script'); 
_script.type = 'text/javascript'; 
var iFrame = document.getElementById('fr'), 
    iFrameBody, 
    t = document.getElementById("inpt"), 
    btn = document.getElementById('btn'); 

function injectJS(content, val) { 
    removeJS(); 
    var windowVal; 
    if (iFrame.contentDocument) { 
     windowVal = iFrame.contentDocument; 
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; 
    } else if (iFrame.contentWindow) { 
     windowVal = iFrame.contentWindow; 
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; 
    } 
    content.innerHTML = val; 
    iFrameBody.innerHTML = ""; 
    iFrameBody.appendChild(content);  
    if(isScriptTagIsThere()){  
     windowVal.location.href = "javascript:" + val; 
    } 
} 
function isScriptTagIsThere(){ 
    if (iFrame.contentDocument) { 
     iFrameScript = iFrame.contentDocument.getElementsByTagName('script')[0]; 
    } else if (iFrame.contentWindow) { 
     iFrameScript = iFrame.contentWindow.document.getElementsByTagName('script')[0]; 
    } 
    if (iFrameScript) { 
     return true; 
    }else{ 
     return false; 
    } 
} 
function removeJS() { 
    if (iFrame.contentDocument) { 
     iFrameScript = iFrame.contentDocument.getElementsByTagName('script')[0]; 
    } else if (iFrame.contentWindow) { 
     iFrameScript = iFrame.contentWindow.document.getElementsByTagName('script')[0]; 
    } 
    if (iFrameScript) { 
     iFrameScript.parentNode.removeChild(iFrameScript); 
    } 
} 
addEvent(btn, "click", (function() { 
    injectJS(_script, t.value); 
}), false); 

http://jsfiddle.net/n5fdywb9/6/

讓我知道如果它幫助..