I have been struggling on one of those programing challenge sites for a while. It has a console type thing that lets me enter javascript and press a run button. I need to create an iframe inside of that webpage with another webpage inside of it (for example, im on thiswebsite.com/level1 and I need to create the iframe with thiswebsite.com/level2 inside of it).
Have tried creating iframes as follows:
document.getElementById('someDiv').innerHTML = '<iframe src="thissite.com/level2/" height= 300 width=400>';
However it does not run when I try this, is there an alternative way?
Thanks.
Use createElement method of document
var a = document.createElement('iframe');
a.src = "your path will go here"; //add your iframe path here
a.width = "1000";
a.height = "500";
document.querySelector('body').appendChild(a)
I just append the iframe to body. To append it to someDiv replace last line with below code
document.getElementById('someDiv').appendChild(a);
I doubt that the site doesn't allow you to create iframes.
Like, if you try the below code in your Console
//define function
function prepareiFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}
//call it
prepareiFrame()
Stackoverflow will throw the below error:
Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=OoWPV7agCuHt8wf3v6egDA' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Related
I am trying to figure out how to name/rename iframes with javascript.
function sesamOpenU(){
x = document.querySelector('iframe');
x.style.height= '200px';
x.style.width= '400px';
x.name = 'myFrame1' ;
let url = 'https://www.example.com/'
let other = window.open(url,'myFrame');
}
<iframe name ="myFrame">
</iframe>
<button onclick= "sesamOpenU()">Sesam, open U</button>
First, i tried to name an iframe without a name with x.name after defining x.
no errors in the console, but no result either.
I named the iframe manually to target it, and it works.
Then I tried to rename it with Javascript, but again, no result.
For ruling things out, I decided to adjust the height and width for reference to see if it would adjust.
It does.
I tried the adjustments before the function, no result. (widht and heigh does, name doesn't)
Can someone shine a light on my problem?
Edit: yes, i know that i have targeted myFrame, and not myFrame1 in the example. It was the last step of testing which one it would take. The named version, or the renamed version. The named version works, the renamed version doesn't ( opens the webpage in a new tab)
edit: solved.
Testing locally showed differences between Firefox and Chrome - Firefox happily opened the url supplied to window.open in the iframe with the same name as the browsing context supplied as the second argument. Chrome did not and would open the url in a new tab.
A possible workaround might be to set the src attribute of the iframe element directly:
function sesamOpenU(){
x = document.querySelector('iframe');
x.style.height= '200px';
x.style.width= '400px';
x.name = 'myFrame1' ;
let url = 'https://www.example.com/'
// let other = window.open(url,'myFrame1');
x.src = url;
}
This seems to work in both Firefox and Chrome, whether using example.com or the business site url provided in the original posted.
The code does reassign the name of your iframe but the way you set the source does not seem to be working.
I tried the following which seem to be working:
function sesamOpenU(){
x = document.querySelector('iframe');
x.style.height= '200px';
x.style.width= '400px';
x.name = 'myFrame1' ;
let url = 'https://www.example.com/';
x.src = url;
}
<iframe name ="myFrame">
</iframe>
<button onclick= "sesamOpenU()">Sesam, open U</button>
Note: your code does not work in an SO snippet, at least on my system, it gives this error:
js:26 Blocked opening 'https://www.alternate.nl/' in a new window
because the request was made in a sandboxed frame whose 'allow-popups'
permission is not set.
So I have tried it as a complete piece of code, see below.
It works fine with renaming the iframe - as long as you go back to having a url that will allow itself to be in a iframe - somehow your original url has been replaced by one that won't work - and whether or not the iframe had another name to begin with. Maybe there was some typo problem in the original code given which we missed? Anyway, all is well:
Here is the full code:
<!doctype html>
<html>
<head>
<title>Test iframe</title>
</head>
<body>
<iframe name='myFrame'></iframe>
<button onclick= "sesamOpenU()">Sesam, open U</button>
<script>
function sesamOpenU(){
x = document.querySelector('iframe');
x.style.height= '200px';
x.style.width= '400px';
x.name = 'myFrame1' ;
let url = 'https://www.alternate.nl/'
let other = window.open(url,'myFrame1');
}
</script>
</body>
</html>
This question already has answers here:
Cross domain iframe issue
(5 answers)
Adding click event handler to iframe
(2 answers)
Closed 4 years ago.
Through a script tag I've inserted on an external site, I am trying to load in some javascript which iframes a widget I am hosting on a webpage,
I only want the small launcher icon iFramed initially and then when its opened, iFrame the entire chat window when it's expanded. As Iframing the whole thing takes up a lot of the external site and means everything behind is isnt reachable!
My thought was to have a small iframe initialy and then when it's clicked, increase it's size to the entire window and then while doing so, add an element in the area where the launcher is to then close it when pressed and reduce the iframe size again! hacky I know but i dont know how else I can do this?
What you can see is me creating an iframe, and trying to give it an id
of 'ifrm' with the line:
the code so far: ifrm.setAttribute("id", "ifrm");
. AND then try to change the iframes CSS or append a new one? BUT this doesnt call the function when clicked so i may
have the setting of the ID / calling it wrong?
Then how would I append an element? sorry ive probably gone the wrong way about this.
prepareFrame();
function prepareFrame() {
console.log("yes this consoles inside of prepareFrame")
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://5efae1b1.ngrok.io");
ifrm.style.width = "100px";
ifrm.style.height = "100px";
ifrm.style.position="fixed";
ifrm.style.right="0";
ifrm.style.bottom="0";
ifrm.style.border="0";
ifrm.setAttribute("id", "ifrm");
document.body.appendChild(ifrm);
document.getElementById("ifrm").addEventListener("click", function(){click1(1);}, false);
}
function click1() {
alert("calling");
document.getElementById("ifrm").style.backgroundColor = '#ff0000';
colorcheck = document.getElementById("ifrm").style.backgroundColor;
console.log('colour check' + colorcheck);
};
Thanks so much if you can help!
Instead of doing this:
document.getElementsByTagName("iframe")[0].setAttribute("id", "ifrm");
Try this at the beginning of your iframe creation:
var ifrm = document.createElement("iframe");
ifrm.setAttribute('id', 'ifrm'); // assign an id
add ifrm.contentDocument.addEventListener("click", function(e){click1(e)}, false) to inside the prepareFrame function, this will then call the click1 function.
I'm making a Wordpress site and I need that a page load itself in an iframe inside of it.
It's like the inception movie!
My problem is that urls of the pages are dynamic.
Actually I need a script that append an iframe in a specific div...I've tried with this line of code but it doesn't work:
jQuery(".reloaddivxxx").append(" <iframe src=\"(window.location.href)\"></iframe> ");
I'm not sure if it's clear what I need to do...
I need to create an iframe that loads the page where is placed and get the url of that page dynamically.
You can set the url of an iframe with JavaScript, after getting the URL of the current page.
var url = window.location.href;
var iframe = window.frames[0];
iframe.location = url;
Edit 1:
If you're inserting the iframe dynamically as well, you have to either get the reference to the iframe after inserting it, or before. Here's an example of the latter:
var url = window.location.href;
// Create the iframe using jquery, and set the url of it.
var iframe = $("<iframe>");
iframe[0].src = url;
// Insert the iframe into the div.
jQuery(".reloaddivxxx").append(iframe);
Try this
var iframe = document.createElement('iframe');
iframe.style.width = '100px';
iframe.style.height = '100px';
iframe.src = window.location.href;
document.getElementsByClassName('reloaddivxxx')[0].appendChild(iframe);
I've written a bookmarklet (with a little help from the experts at Stackexchange) and I've run into a small little issue where I can't close the thing.
Here's the code (sensitive people should probably move on):
javascript: (function () {
var htmlheader = "<html><head></head>"
var html = htmlheader + "<body><a href='javascript:document.getElementById(\"TroubleiFrame\").style.visibility = \"hidden\"'>Close</a>" +
"</body></html>";
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.style.background = "#fff";
iframe.style.width = "50%";
iframe.style.height = "500px";
iframe.style.left = "25%";
iframe.style.top = "25vh";
iframe.style.position = "fixed";
iframe.style.zIndex = "9999";
iframe.id = "TroubleiFrame";
iframe.style.boxShadow = "0 0 0 100vw rgba(0,0,0,0.75)";
document.body.appendChild(iframe);
})();
When clicking on the close link I get this error:
Uncaught TypeError: Cannot read property 'style' of null
If I paste the command in Chromes console it works:
document.getElementById("TroubleiFrame").style.visibility = "hidden"
Do you have any ideas on what I'm doing wrong? If possible I'd love a brief explanation too so I'm learning something from it.
/Patrik
Your iFrame doesn't know about an element called "TroubleiFrame" since it is in a child window.
You need to call the parent instead, and from there you can close it
parent.document.getElementById("TroubleiFrame");
Look at this question to see how to close the iFrame properly. Right now you're just going to hide it
I've also came across this problem creating a bookmarklet just like Pinterest's Pin It.
It should work cross-domain.
The only way I could work this out, was by posting events between the page inside the iframe and the parent page following this example on GitHub:
https://gist.github.com/kn0ll/1020251
I've posted an answer on this other thread:
https://stackoverflow.com/a/43030280/3958617
And also found one more example on this other thread:
https://stackoverflow.com/a/21882581/3958617
Hope it helps!
There is a border showing on an iframe and I can't get rid of it.
IE 6 and 7 work as intended with a little JavaScript:
function test(){
var iframe = document.getElementById('frame2');
iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d";
iframe.contentWindow.document.body.style.border = "#a31d1d";
iframe.contentWindow.document.body.style.outlineColor = "#a31d1d";
}
But the border remains visible in IE 8.
Add following attributes to iframe tag:
marginheight="0" marginwidth="0" frameborder="0"
I had the same problem with iframes created dynamically, and it turned out that setting border properties AFTER adding the iframe to the document has NO effect:
The following code shows a 3d border:
var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
//Iframe added BEFORE setting border properties.
document.body.appendChild(iframe);
iframe.frameBorder = "no";
But this actually removes it:
var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);
Hope that this would help solve your problem.
I tried loads of variations on this idea and ended up using something along these lines. Thought I'd share it.
<script type="text/javascript">
url = 'http://www.dollypower.com';
title = 'Dolly Power';
width = '660';
height = '430';
document.write('<iframe src='+url+' title='+title+' width='+width+' height='+height+' frameborder=0></iframe>');
</script>
Then I used noscript tags to enter an alternative for non-JS users, i.e:
<noscript><p>Please click here for Dolly Power</p></noscript>
I tested it in IE8 and it's all cool for me and it also validates.
Hope this might help someone out there!
Success!
Try this. It will find any iframe elements and remove their borders in IE and other browsers (though you can just set a style of "border : none;" in non-IE browsers instead of using JavaScript). AND it will work even if used AFTER the iframe is generated and in place in the document (e.g. iframes that are added in plain HTML and not JavaScript)!
This appears to work because IE creates the border, not on the iframe element as you'd expect, but on the CONTENT of the iframe--after the iframe is created in the BOM. ($#&*##!!! IE!!!)
Note: The IE part will only work (of course) if the parent window and iframe are from the SAME origin (same domain, port, protocol etc.). Otherwise the script will get "access denied" errors in the IE error console. If that happens, your only option is to set it before it is generated, as others have noted, or use the non-standard frameBorder="0" attribute. (or just let IE look fugly--my current favorite option ;) )
Took me MANY hours of working to the point of despair to figure this out...
Enjoy. :)
// =========================================================================
// Remove borders on iFrames
if (window.document.getElementsByTagName("iframe"))
{
var iFrameElements = window.document.getElementsByTagName("iframe");
for (var i = 0; i < iFrameElements.length; i++)
{
iFrameElements[i].frameBorder="0"; // For other browsers.
iFrameElements[i].setAttribute("frameBorder", "0"); // For other browsers (just a backup for the above).
iFrameElements[i].contentWindow.document.body.style.border="none"; // For IE.
}
}
Sample HTML to go with the sample JS would be helpful =)
Try using IE8's Developer Tools (press F12 on the page you have problems with) to isolate what styles are being applied to the iframe. You can also play with the styles there, to cut down your iteration time.
Keep in mind that this may be IE not respecting border settings in the css, whereas the traditional setting of the attribute BORDER=0 on the iframe element may work. Worth a test, at least.
Edit: It looks like what does fix the problem is setting frameborder='0' on the iframe element. That worked for me, at least.
If you want your code to validate you could do this with javascript. I found the perfect answer when I had this problem a few months ago here
var iframe = document.createElement("iframe");
iframe.src = "banner_728x90.gif";
iframe.width = "728";
iframe.height = "90";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
f you want to load another page seamless in the iframe you can do this if you copy and paste this code into the head of your page. I found it on a site with free scripts. The performance is good in most cases
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
ifrm.style.height = getDocHeight( doc ) + 10 + "px";
ifrm.style.visibility = 'visible';
}
You then give your iframe an id and call the script on load. This is how.
var iframe = document.createElement("iframe");
iframe.setAttribute('id', "ifrm1");
iframe.setAttribute('src', 'http://www.hekcmviw.com/'); // change the URL
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '10');
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('onload' ,"setIframeHeight(this.id)");
document.body.appendChild(iframe);