CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Lorena Brito
Lorena Brito

Reputation: 13

iframe DOM overwrite

I'm toggling some navigation animation to display and hide particular li elements. I'd like to keep my elements displayed every time the user is on the main screen. I've successfully maintained the nav items displayed on initial load.

Here is a demo:

https://jsfiddle.net/lorenabrito/p9jm59db/22/

If the content is not being interacted with it will redirect to the main page through a .replace()

However, if the nav is hidden and the inactivity condition is triggered, the navigation stays closed on redirect, causing nav duplication. I know the nav duplicates because the main screen page is loading inside the iframe in the main screen.

Ideally, I'd like to overwrite the DOM with the main screen content when the page inactivity redirect is triggered. I momentarily thought perhaps I could set a condition to return when any new content has been loaded in the iframe, but with the replace I'm using the src value doesn’t change. I don't know if I've looked at this too long or if just not possible.

All three pages are using the same domain.

I'm currently console logging every time the iframe loads.

I've found Access child iFrame DOM from parent page the most helpful.

Any input would be greatly appreciated.

//main page with navigation 
<iframe id="main" src="http://main-screen.html"></iframe>

//second page 
//http://second-screen.html
if (inactivity > 3) // waits 3 mins. 
  window.location.href = 'http://main-screen.html'; 
}

//third page 
//http://third-screen.html
if (inactivity > 3) // waits 3 mins. 
  window.location.href = 'http://main-screen.html'; 
}

My apologies for not posting a demo right away. Thank you!

Upvotes: 0

Views: 242

Answers (1)

Lorena Brito
Lorena Brito

Reputation: 13

I was already successfully writing the DOM structure of the window with with the nested iframe. Ultimately, I came to the conclusion during the development of the project that my initial approach was messy. I was seeking to replace that windows DOM with the most recently loaded iframe.

In the end I learned a great deal about iframes!

Upvotes: 1

Related Questions