I want to dynamically append the script in an iframe after onclick or onkeypress event fired

Question

I have an input which has a dynamic value as it's editable. Either Onkeypress in textarea or after onclick event fired on clicking the btn id it should append the input value in another iframe which is to be dynamic because input is to be changeable. So without page load the iframe's script innerHTML should refresh. I've done something but it's not working.

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

And here's the working demo. http://jsfiddle.net/n5fdywb9/

Referring to another article (http://stackoverflow.com/questions/86428/whats-the-best-way-to-reload-an-iframe-using-javascript) I see that accessing the content of the frame goes like this: "document.getElementById('some_frame_id').contentWindow". So you probably can thus also access the document this way. — Peter Branforn, Oct 09 '14 at 10:05
@PeterBranforn I've tried this too as i used in else if check here but no luck. — Akshaya Raghuvanshi, Oct 09 '14 at 10:10

score 2 · Accepted Answer · answered Oct 09 '14 at 10:28

Try this. It should work.

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

score 0 · Answer 2 · answered Oct 09 '14 at 10:10

0

You cannot append text to a script tag and onclick needs to be assigned to the element itself.

If the onclick is not associated in the HTML, then the onclick event is triggered when the page loads.

I have made the changes in the Fiddle.

answered Oct 09 '14 at 10:10

Aashray

2,753
16
22

please check http://jsfiddle.net/n5fdywb9/3/ !!.. – rahul_send89 Oct 09 '14 at 10:53
It is throwing an error. – Aashray Oct 09 '14 at 10:55
which browser you are using .. :/ – rahul_send89 Oct 09 '14 at 10:55
did you check try write `document.write('awesome');` int above area .. and click the buttons .. ? – rahul_send89 Oct 09 '14 at 10:56
Using Firefox 32.0.3, and the string which it is taking is throwing the error. I have fixed that in my fiddle. – Aashray Oct 09 '14 at 11:00
its working here .. :/ .. you are using windows, mac, linux, or undefined .. .? – rahul_send89 Oct 09 '14 at 11:10
i don't know ... i m not getting any error .. can u ping the error log .. m using mac . tested this in all three browser. – rahul_send89 Oct 09 '14 at 11:47

rahul_send89 · Answer 3 · 2014-10-11T09:34:15.647

universal script to 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/

let me know if it helped ..

@rahul-send89 Only one problem is there when you run it second time the javascript inside iframe won't work. First time it works. I've modified your fiddle but still not working. Check http://jsfiddle.net/n5fdywb9/5/ — Akshaya Raghuvanshi, Oct 09 '14 at 18:12
@AkshayaRaghuvanshi : just updated my ans .. please check and revert . — rahul_send89, Oct 11 '14 at 09:37

I want to dynamically append the script in an iframe after onclick or onkeypress event fired

3 Answers3