Question

我有一个具有动态值的输入，因为它是可编辑的。在textarea中 Onkeypress 或在单击btn id时触发 onclick 事件后，它应将输入值附加到另一个 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分配给该元素本身。

如果HTML中未关联onclick，则会在页面加载时触发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/

让我知道它是否有帮助..

我希望在onclick或onkeypress事件触发后动态地将脚本附加到iframe中

3 个答案: