I am loading a .js file I wrote. Within that .js file I am creating a Iframe like this
var frmSource = "http://MYLINK.com/mypage.php?" + encodeURI(URLBuilder);
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", frmSource);a
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
ifrm.setAttribute("frameBorder", "0");
document.body.appendChild(ifrm);
URLBuilder contains the GET variables to the next page
The issue occurs at document.body.appendChild(ifrm);
and my error is
javascript typeerror: null is not an object (evaluating 'document.body.appendchild')
I suspect the issue is it is trying to append the iframe to the body but the body has not properly loaded. I am currently only getting this issue in safari.
If your script is in the head, then the body is not defined (null). Put the script in the footer.
I have done something like this to configure my IFrame creation and it is working fine
var urlWithParam = url + encodeURI(URLBuilder)
var iframe = document.createElement('iframe');
iframe.src = urlWithParam;
iframe.id = "iframe_" + done;
iframe.style.position = "relative";
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.right = "0";
iframe.style.bottom = "0";
iframe.style.frameBorder = "0";
iframe.style.borderStyle = "none";
iframe.style.display = "none;";
//if you want to do something after the Iframe load
iframe.onload = function(event) {
};
Moved the script below the body. And it worked like a charm.
Related
var ifrm = document.createElement("iframe");
var linkFrm = "https://ExternalLink/";
Example:
var x = linkFrm.document.getElementsByClassName("class");
x.style.height = "0px";
x.style.width = "0px";
If something is inside an iframe, and you don't have the access to the iframe's original location, you simply can't manipulate elements inside it.
I'm new to HTML and Javascript. I'm trying to write a Javascript function to print the content of an (hidden) iframe in order to print documents (to the user, seemingly) without opening them.
I based the function on the example I found here: https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
Printing the content works fine but the trouble is removing the iframe from the document after the printing has finished. This is what my code looks like now.
function closePrint () {
var element = document.getElementById("printFrame");
element.parentNode.removeChild(element);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.width = 0;
oHiddFrame.height = 0;
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.id = "printFrame";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
I changed two lines in the example from
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
to
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
As it didn't remove the iframes without the timeout.
This works fine in both IE11 and Chrome, but in IE compitability mode (which I think emulates IE7) it gives me an error "Not implemented" when I try to use setTimeout.
So my question is, is there another way to run the closePrint function after a timeout or some other way to remove the iframe from the document when I've printed the content? Any help is appreciated.
after printing, leave the iframe on document.body. When you need to add your next iframe, first run a check for its presence ~ if its present, remove it then (first two lines).
myfunction() {
const iframe = document.querySelector('iframe');
if (iframe) iframe.parentNode.removeChild(iframe);
const i = document.createElement('iframe');
i.style.display = 'none';
i.src = this.study.DocumentUrl;
document.body.appendChild(i);
document.querySelector('iframe').contentWindow.focus();
document.querySelector('iframe').contentWindow.print();
}
I created a simple bookmarklet to append 3 invisible iframe's to the current document looking like this:
javascript: (function() {
var link = window.location.href;
var desktop = link.replace(".com", ".com/purge");;
var mobile = link.replace(".com", ".com/mpurge");
var tablet = link.replace(".com", ".com/tpurge");
var platforms = [desktop,tablet,mobile];
for (i = 0;i<platforms.length; i++){
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", platforms[i]);
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
document.body.appendChild(ifrm);
if(i==platforms.length-1){
ifrm.onload = function(){
location.reload();
}
}
}
})();
what i want to do its to refresh the page im at after the third iframe is loaded but for some reason i cant get this one to work, any idea why?
thx!
i will never be == platforms.length inside of loop, because your loop condition is i<platforms.length.
Make it i == platforms.length - 1 or take reloading outside of the loop
Hello i am facing problem in all IE browser, I am loading iframe inside div using js code but somehow the css classes are not getting applied inside my iframe components like textbox, buttons,etc. . the same code works for chrome and forefox , only IE is creating problems. my code is like...
var head = document.getElementsByTagName('head')[0];
var myCSS = document.createElement("link");
myCSS.rel= "stylesheet";
myCSS.type= "text/css";
myCSS.href= Url + "/public/css/mycss.css";
head.appendChild(myCSS);
//for IE
if (window.attachEvent) {
window.attachEvent("onload", function() {
var divforIframe = document.createElement("div");
divforIframe.id = "divforIframe";
var i = document.createElement("iframe");
i.id = "myIFrame";
i.src = Url;
i.scrolling = "no";
i.frameborder = "0";
i.width = "500px";
i.height = "300px";
divforIframe.appendChild(i);
document.getElementById("myDiv").appendChild(divforIframe);
});
}
First,I created a hidden frame like this:
var oHiddenFrame = null;
if(oHiddenFrame == null){
oHiddenFrame = document.createElement("iframe");
oHiddenFrame.name = "hiddenFrame";
oHiddenFrame.id = "hiddenFrame";
oHiddenFrame.style.height = "0px";
oHiddenFrame.style.width = "0px";
oHiddenFrame.style.position = "absolute";
oHiddenFrame.style.visbility = "hidden";
document.body.appendChild(oHiddenFrame);
}
Then,I add a event to the button like this:
var fnLocation = function(){
frames["hiddenFrame"].location.href = "http://meckmeck.cn";
}
var oButton = document.getElementById("mb_submit");
oButton.addEventListener("click", fnLocation, false);
When I click the button,I got a error:
frames.hiddenFrame is undefined
There's no such thing as document.frames. The name-indexed frame array is window.frames (aka just frames).
0-iframes are so old-school, and these days mostly associated with malware-installing exploits (especially on Chinese pages). How about using an XMLHttpRequest instead?