Javascript iframe having no border

Question

I am a coder with little expierience with css and javascript. Thanks for your help

I am trying to make my javascript create an iframe with another part of my website in it and that is working fine with this code:

<div>
<script type="text/javascript">
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.example.com");
    var scwid = (screen.width)*(78.8/80)
    ifrm.style.width = (scwid + "px");
    ifrm.style.height = "100px";
    document.body.appendChild(ifrm);
</script>
</div>

That made an iframe, but iframes, in their natural state are ugly and the border is annoying. So I went online to find the css way to remove an iframe, and it saidframeBorder = "0" would work. I tried several variations to try and add this into my script with no luck

Test #1

<div>
<script type="text/javascript">
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.example.com");
    var scwid = (screen.width)*(78.8/80)
    ifrm.style.width = (scwid + "px");
    ifrm.style.height = "100px"
    ifrm.style.frameBorder = "0";
    document.body.appendChild(ifrm);
</script>
</div>

Test #2

<div>
<script type="text/javascript">
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.example.com");
    var scwid = (screen.width)*(78.8/80)
    ifrm.style.width = (scwid + "px");
    ifrm.style.height = "100px";
    ifrm.setAttribute("0")
    document.body.appendChild(ifrm);
</script>
</div>

Obviously neither of these worked, so how would I do this? Put CSS in another part of my website? (As I said before, Im bad with css) Or try some other javascript altogether?

Is this what you are trying to achieve: [JSFiddle](https://jsfiddle.net/RajeshDixit/au5ycf6d/1/) — Rajesh, Mar 03 '17 at 05:17
Possible duplicate of [Remove border from IFrame](http://stackoverflow.com/questions/65034/remove-border-from-iframe) — Rajesh, Mar 03 '17 at 05:18
If the content you want to place in the iFrame is from your own site, can you not rather use AJAX? http://stackoverflow.com/questions/10656992/why-ajax-over-iframes — Gezzasa, Mar 03 '17 at 05:20

score 0 · Accepted Answer · answered Mar 03 '17 at 05:16

0

Just add this to your CSS to get rid of frame border.

iframe{
border: 0;
}

answered Mar 03 '17 at 05:16

Aslam

9,204
4
35
51

score 0 · Answer 2 · answered Mar 03 '17 at 05:24

0

You can add an attribute 'frameborder' to the iframe, and set its value equal '0'.

exp:

<iframe frameborder="0"></iframe>

answered Mar 03 '17 at 05:24

马邦德

103
1
9

I want JS, not html – Athdot Mar 03 '17 at 14:07
ifrm.setAttribute("frameborder", "0"); – 马邦德 Mar 05 '17 at 03:08

score 0 · Answer 3 · answered Mar 03 '17 at 05:42

0

you just need to set attribute frameBorder=0. or You can use style="border:0;" in your iframe code. and In HTML 5 you can use the seamless attribute like

answered Mar 03 '17 at 05:42

manoj bagale

1
1

score 0 · Answer 4 · answered Mar 03 '17 at 09:05

0

you can add css property like

iframe{ border:none; *\or maybe '0'*/}

or you can add <iframe src="#" frameborder='0'></iframe> in html

answered Mar 03 '17 at 09:05

Tirthapriya Banerjee

1

score 0 · Answer 5 · answered Jul 19 '21 at 15:19

0

Only JavaScript:

ifrm.frameBorder = 0;

answered Jul 19 '21 at 15:19

yenssen

1,171
2
23
37

Javascript iframe having no border

5 Answers5