EDIT: I found out that the problem has to do with not having access to the elements inside an iframe without a specific API or something like that. It has been solved.
I need to embed the image of the Astronomy Picture of the Day website. Here is the html that I have now:
<head>
<style>
body, html {
margin: 0px;
padding: 0px;
}
iframe {
border: none;
}
</style>
</head>
<body>
<iframe id="iframe" width="100%" height="600px"
src="https://apod.nasa.gov/apod/astropix.html"></iframe>
<div id="PlaceToPutTable"></div>
<script src="panel.js"></script>
</body>
Here is the JavaScript that I have now:
var iframe = document.getElementById("iframe");
var div = document.getElementById("PlaceToPutTable");
div.innerHTML =
iframe.contentWindow.document.getElementsByTagName("a")[1];
I have tried using iframe.contentWindow.document.getElementByTagName("img")[0] with and without .innerHTML following it.
I am using this as an Opera Sidebar Extension, so I keep getting this error when adding .innerHTML: Uncaught type error: cannot read property 'innerHTML' of undifined.
I got this code by manipulating the code I got at this answer, but the Astronomy Picture of the Day image does not include an id.
You are not getting anything from there.
I would suggest you to debug a bit your code. First of all it seems like this is not getting anything
iframe.contentWindow.document.getElementsByTagName("a")[1]so you should first debug it to see if it contains the element you are looking for.So you should debug with a console log and see what this gets:
Hope this helps you out.