window.frames returns only the base window - javascript

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>

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>

How to find a variable that is causing scope colision?

i just started a new html project as any other day, but totay i was suprised with scope colision in javascript. The point is i'm trying to declare a variable called top, but i think that i had already declared it in another file and i would like to know if there is a fast way to find this file and fix it.
This is my html:
<!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>day one</title>
</head>
<body>
<h1>hiii</h1>
<script src="script.js"></script>
</body>
</html>
This is my javascript:
let top = [0, 0, 0]
When i open the devtools and look at the console there is an error message there: script.js:1 Uncaught SyntaxError: Identifier 'top' has already been declared (at script.js:1:1)
So i tried to console.log() the top variable and the output was the window
console.log(top)
// same thing as
console.log(window)
So i think that the best approach is trying to find original file where the top variable is, any ideas?
I don't know what to do ;-; HELP PLEASEEEE
top is a built in global property of the window. So you can't use it as a variable name when running in the browser:
https://developer.mozilla.org/en-US/docs/Web/API/Window/top.

Get width and height of an iframe with 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')

external js file loaded but the code don't working

when I write js code internally in the html file It's work well.
hre is the html code
<!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">
<link href="./cs.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="root" onload="App">
</div>
<script src="js/App.js" type="module" />
</body>
</html>
and here is App.js file
import Insert from './Insert.js';
function App(){
document.getElementById("root").insertAdjacentHTML("afterbegin",'<h1>hello Javascript</h1>');
};
onload is not an attribute supported by div elements, generally if you use it you would apply it to the body element, but it should be avoided in favour of addEventListener
The value of the onload attribute is the body of a JS function. Just mentioning the name of another function doesn't do anything. If you want to call a function you would usually follow the name with ().
type="module" loads a JS module, which (among other things) means the outer scope is the module and not the global scope so you can't access App anyway. Again, use addEventListener.
The </script> end tag for the script element is mandatory and you omitted it. (Since it was that last thing in the document it probably won't break anything, but you are opening yourself up for future problems).

I'am getting "[violation] avoiding using document write()" error when adding a body tag in html

when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!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>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!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>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue

Categories