Quite easy, but there's something I miss..Nothing is working here. So, if my first button(id=simple) is checked, my body will have a onload function (resizeIframe) and put iframe.height 1200px, else if my other button is checked (codemandeur12), put iframe.height at 1700px...but nothing is working!
<script>
function resizeIframe(iframe) {
if (document.getElementById('iframe').contentWindow.document.getElementById('simple').checked) {
iframe.height = "1200px";
} else if (document.getElementById('iframe').contentWindow.document.getElementById('codemandeur12').checked) {
iframe.height = "1700px";
}
}
</script>
<iframe src="http://www.cbifinance.ca/form.php" scrolling="no" height="100%" onload="resizeIframe(this);" id="iframe">
Your browser does not support iframes.
</iframe>
My CSS for no scrollbar :
<style type="text/css">
iframe {
overflow:hidden;
width:600px;
}
</style>
EDIT : I am on the same website / server...
Try changing iframe.height to iframe.style.height
Edit:
Another idea:
var iframe = document.getElementById('iframe');
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
function resizeIframe(iframe) {
if (frameDoc.getElementById('simple').checked) {
iframe.style.height = "1200px";
} else if (frameDoc.getElementById('codemandeur12').checked) {
iframe.style.height = "1700px";
}
}
Using the answer from: getElementById from iframe
Related
I'm getting the "Permission Denied" error on Edge and IE when creating an iframe in the script with some delay (setTimeout) and trying to access the window object.
It works on all other browsers, and works without the delay on IE and Edge.
<script>
function createIframe(win) {
console.log('foo', win.foo);
var width = 300;
var height = 250;
var id = 'ifr';
var src = '';
var iframeTemplate = '<iframe id="'+id+'" src="'+src+'" width="'+width+'" height="'+
height+'" marginheight="0" marginwidth="0" scrolling="NO" frameborder="0"></iframe>';
win.document.write(iframeTemplate);
var iframe = win.document.getElementById(id);
console.log('foo', win.foo);
if (iframe) {
var doc = iframe.contentWindow.document;
doc.write('<html><head></head><body><script>console.log("foo on parent", window.parent.foo);</scr'+ 'ipt></body></html>');
doc.close();
} else {
console.log('Failed to create an iframe');
}
}
window.foo = 'bar';
setTimeout(function() {
createIframe(window);
}, 3000);
</script>
This code should print:
foo bar
foo bar
foo on parent bar
But it throws the error "Permission Denied" on the second console.log on Edge and IE.
Works fine without setTimeout.
If I remove the second console.log, and acess window.parent.foo from within an iframe, it is undefined on Edge and IE
Snippets:
Doesn't work on Edge and IE: https://jsfiddle.net/vo2yrjft/
Works on Edge and IE: https://jsfiddle.net/6cbfk1yr/
Any workaround for that?
document.write is a "bad practice", it will block the page, you could refer to this thread for detailed information.
As a workaround, you could use createElement('iframe') to create an iframe and then use appendChild() to insert the element. Below is the sample code, it can run well in IE & Edge:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function prepareFrame(win) {
console.log('foo', win.foo);
var id = 'ifr';
var ifrm = document.createElement('iframe');
ifrm.setAttribute('src', '');
ifrm.setAttribute('id', id);
ifrm.setAttribute('marginheight', 0);
ifrm.setAttribute('marginwidth', 0);
ifrm.setAttribute('scrolling', 'NO');
ifrm.setAttribute('frameborder', 0);
ifrm.style.width = '300px';
ifrm.style.height = '250px';
document.body.appendChild(ifrm);
var iframe = win.document.getElementById(id);
console.log('foo', win.foo);
if (iframe) {
var doc = iframe.contentWindow.document;
doc.write('<html><head></head><body><script>console.log("foo on parent", window.parent.foo);</scr' + 'ipt></body></html>');
doc.close();
} else {
console.log('Failed to create an iframe');
}
}
window.foo = 'bar';
setTimeout(function() {
prepareFrame(window);
}, 3000);
</script>
</body>
</html>
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.
I have the following script to create an iframe
function createIframe() {
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.visibility = "hidden";
document.body.appendChild(iframe);
// Firefox, Opera
if(iframe.contentDocument) iframe.doc = iframe.contentDocument;
// Internet Explorer
else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document;
// Magic: Force creation of the body (which is null by default in IE).
// Also force the styles of visited/not-visted links.
iframe.doc.open();
iframe.doc.write('<style>');
iframe.doc.write("a{color: #000000; display:none;}");
iframe.doc.write("a:visited {color: #FF0000; display:inline;}");
iframe.doc.write('</style>');
iframe.doc.close();
// Return the iframe: iframe.doc contains the iframe.
return iframe;
}
however in chrome console it is giving me the error Cannot call method 'appendChild' of null
why is it not working?
The code is correct. Have you added body in the page?
Try this:
<html>
<body>
<script>
window.onload=function() {
createIframe()
};
function createIframe() {
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.visibility = "hidden";
document.body.appendChild(iframe);
// Firefox, Opera
if(iframe.contentDocument) iframe.doc = iframe.contentDocument;
// Internet Explorer
else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document;
// Magic: Force creation of the body (which is null by default in IE).
// Also force the styles of visited/not-visted links.
iframe.doc.open();
iframe.doc.write('<style>');
iframe.doc.write("a{color: #000000; display:none;}");
iframe.doc.write("a:visited {color: #FF0000; display:inline;}");
iframe.doc.write('</style>');
iframe.doc.close();
// Return the iframe: iframe.doc contains the iframe.
return iframe;
}
</script>
</body>
</html>
iframe.doc.write is not the cleanest solution....
My webpage has an embedded iFrame which is using a 3rd party tool within my webpage which means the URL from the iFrame is coming from a different location.
I need to detect the presentation of a scroll bar within the iFrame window when resizing the page, then carrying out a task once it has been detected.
I have tried a variety of different solutions all which have not been successful.
Is this possible?
Many Thanks!
This is the first thing that comes to my mind: http://jsfiddle.net/matias/hhcKn/
just sample code!
HTML:
<div id="body"></div>
JS:
var $iframe = $("<iframe></iframe>").appendTo("#body");
var iframe = $iframe[0];
var doc = iframe.document;
//test this
var content = "<h1>Hello world</h1><br><p>more content!</p>";
//and then this
//var content = "<h1>Hello world</h1><br><br><br><br><br><p>more content!</p>";
if(iframe.contentDocument){
doc = iframe.contentDocument;
}
else if(iframe.contentWindow){
doc = iframe.contentWindow.document;
}
doc.open();
doc.writeln(content);
doc.close();
//this is the part that might interest you
var div_height = $("#body").height();
var iframe_height = $("iframe").contents().height();
if(iframe_height > div_height) alert("scrollbars present");
CSS:
body{
border: 1px solid red;
}
iframe{
border: none;
}
<iframe src="111.html" id="iframeid" height="300" width="800"></iframe>
<script type="text/javascript">
function resizeIFrame(){
$("#iframeid").attr("height", $("#iframeid").contents().height());
}
setInterval("resizeIFrame()", 500)
</script>
So I try
document.write('<iframe src='+ location.href + ' width="468" height="60" ></iframe>');
But it seems not to be working at chrome...
This also does not work
<div id="main"></div>
function $(id)
{
return document.getElementById(id);
}
var div = document.createElement("iframe");
div.setAttribute("src", location.href);
div.setAttribute("width", "500");
div.setAttribute("height", "90");
$('main').appendChild(div);
document.write(location.href);
And this does not work
function $(id)
{
return document.getElementById(id);
}
document.write('<div id="main"></div>');
var div = document.createElement("iframe");
div.setAttribute("src", location.href);
div.setAttribute("width", "500");
div.setAttribute("height", "90");
$('main').appendChild(div);
document.write(location.href);
<iframe src="about:blank" onload="if(!this.t){this.t=1; var href=location.href.replace(/[\?\&]inf\=.+/i,''); href += href.indexOf('?') > -1 ? '&inf=' : '?inf='; this.src = href + Math.random();}"></iframe>
I tried on chrome.. seems ok :)
Edit
appended some regex for safe url
Looks like most browsers block that option, which is probably a good idea.
Tested with the code:
<iframe src="."></iframe>
On Chrome, I get this page:
http://jsbin.com/epimi4/