Get width and height of an iframe with JavaScript - javascript

I have an iframe on a page. For this example, its height is 0px and width is 100px.
I want to console.log these values with JavaScript.
At the moment I can access the iframe using window.frames[0], but how do I then get the width and height? What I'm doing currently returns undefined.
Here is the code and Fiddle
https://jsfiddle.net/prvmwg5q/
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<iframe data-search-id="mainline-top" style="height: 0px; width: 100px;">
Test
</iframe>
<script>
console.log(window.frames[0]);
console.log(window.frames[0].offsetHeight); // Undefined
console.log(window.frames[0].offsetWidth); // Undefined
</script>
</body>
</html>

window.frames does not return the DOM element. https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
Instead, give your iframe an id and use getElementById instead.
EDIT: Or, better, as #HereticMonkey points out:
document.querySelector('iframe')

Related

how to access contentWindow of an <embed> tag?

I have an embed tag inside my html page with src as some external URL (same origin).
This embed tag populates some content inside my (parent)html page.
From my parent html page (top window) I am not able to access contentWindow of tag.
The content of <embed> tag is not media, instead its html content.
A similar question was asked here but question did not get relevant response.
Note : please don't suggest me to use a iframe or object tag
Snippet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed content</title>
</head>
<body style="margin-bottom: 3rem;">
<h1>Embed tag testing</h1>
<div style="border: 1px solid maroon;width: 803px;">
<embed id="custom-embed" src="validation.html" height="500px" width="800px">
</div>
</body>
</html>

Changing CSS of element inside an iframe using data attribute

I have an iframe inside my HTML document. This iframe has the data attribute "data-search-id" which is "mainline-top". How do I use JavaScript outside the iframe to change the color of the element with class "base-top". Should I use the data attribute or is there another way? Note I can't add an id or class to the iframe, it is being loaded from somewhere else.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js "integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>
<iframe data-search-id="mainline-top">
<style>.base-top{color: #red;}</style>
<div class="base-top">Stuff</div>
</iframe>
<script>
$('.base-top.).css(color, "blue");
</script>
</body>
</html>
You can insert style tag into iframe.
<iframe data-search-id="mainline-top" id="myIframe">
<style>.base-top{color: red;}</style>
<div class="base-top">Stuff</div>
</iframe>
<style type="text/css" id="mycss">.base-top{color: blue;}</style>
<script type="text/javascript">
$(function () {
$('*[data-search-id="mainline-top"]').contents().find("head")[0].appendChild(mycss);
});
</script>

How to fix the issue CSS is not reflecting on Iframe of Air-Table?

I am trying to add CSS property inside the Air-Table iframe but CSS didn't reflect.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe class="airtable-embed" id="calender" src="https://airtable.com/embed/shriqTxajodBzOTYb?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#calender').on('load', function() {
$("iframe").contents().find("#embedBottomBarContainer").css("display", "none");
});
});
</script>
If I remember correctly, you can only affect the Style of the IFrame if it comes from the same Server as your Website because of the same-origin policy.
So that's probably the problem. You're trying to change the Style of a not same-origin IFrame

window.frames returns only the base window

I'm trying to access the window object of an iframe inserted. When I check window.frames in the inspection, it is the base window's window object not the one of the iframe and window.frames.length is 1. How do I access window object of iframes?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
some contents
<iframe src="iframe.html"></iframe>
</body>
</html>
Yes that one is confusing...
It is per specs that it returns the window object, just like self or globalThis, and this is apparently a relic from Netscape. ref.
The important part for you is that this window object has a .length property saying how many sub-frames there are, you then can access these subframe's windows using the numeric index.
e.g window[0] should return your iframe's window, but in StackSnippet's null-origined iframes, it will just throw an Error.
console.log(window[0]);
some contents
<iframe src="iframe.html"></iframe>

Setting up Background image for a canvas

I am trying to set up a image to a canvas but I am not able to do it. I am not able to find any mistake. The canvas comes up on the inspect element but the image is not setting up.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="CSS/styling.css">
<script src="JavaScript/setImage.js"></script>-->
</head>
<body>
<canvas id="canvas" style="color: #0cff15; -webkit-background-image: url(/cheque.jpg)" ></canvas>
</body>
</html>
You don't style a canvas element like a div. You have to get its context via javascript and draw into it. Search for "mdn canvas" for documentation and read a bit.
You can set background image using css and you should give width and height property as well. Please see my demo below.
#canvas{
color: #0cff15;
background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
-webkit-background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
border:1px solid black;
width:500px;
height:500px;
}
<canvas id="canvas"></canvas>

Categories