So I’m pretty new to html/javascript but i’m working on a project where i’m loading a external html page inside a div, that when loaded looks like so:
<div class="content" id="content"> <object type="text/html" data="./ProjectsHTML/radio_project.html"> #document </object> </div>
and inside the ‘#document’ is the external html. This external html contains some titles that can be minimized and maximazed to hide/show their content.
I have a side-menu on the main html that displays all the titles (the titles were hard coded on the side-menu) and I want to access the titles position inside the external html so when the title is clicked on the side menu, the external html autoscrolls to the position of said title.
If it’s usefull for the solution, I’m using Electron.
Please help 🙂
Advertisement
Answer
Assuming the pages are from the same domain, a similar question is addressed here.
However, if the page within the iframe is from a different domain, you won’t be able to access individual elements – that’s cross-site scripting, and it is a security vulnerability.
There are a few options if you own both pages, even if they are on separate domains:
- You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
- You could post messages to the iframe and handle “scroll requests” in the hosted page. You will want to be careful with validation of the source of those messages.