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!
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!
get parent.location.url - iframe - from child to parent
Access child iFrame DOM from parent page
Is there a way to uniquely identify an iframe that the content script runs in for my Chrome extension?
Related
I have a css animation that essentially slides two images with a high z-index off the screen revealing the website content below it on the home page. It is only on the home page and not on any other pages.
What I would like to do is have this animation run only the first time the page is accessed during a session. So if the user navigates to another page and then comes back to the home page, I don’t want the animation to run again.
The only solution I can think of is to create an HTML5 session storage object on the first page load that is checked every time the home page is loaded and use jquery to hide div that contains animation if the value of the object is set.
This seems a bit overkill for such a simple task. Any suggestions on a simpler way of just removing the div that is persistent across page reloads during the session? You don’t have to write the code for me, just point me in a simpler direction if possible. Like is there a way to do this with just CSS. Or if I remove the element using JavaScript will it remain removed after navigating to another page within site and then coming back to home page. Please and thanks!
P.S. This is a custom WordPress theme so I’m open to a PHP solution as well.
You can check the referrer URL and run the animation only if the referrer is not the site itself. But this time the animation won't be shown if the visitor first opens another page and then navigates to the homepage.
Another option would be using cookies.
Normally, html navigation will release the first html page and load another.
But I hope to navigate from one html page to another but keep them in memory both, thus I can apply the document messages.
Is it possible?
Welcome any comment.
Yes and no.
No, you cannot change page and keep the old page in memory.
Yes, you can store the current window.document into a variable and then over-write the entire page with content loaded via AJAX from another page.
This method won't really load the new page though. The url will be the same, the title will be unchanged, really only the DOM will be updated.
You could try to use tabs
http://www.w3.org/Style/Examples/007/target.en.html#tab1
Putting your contentent for each page in a separate tab div and play with the formatting / navigation to simulate moving between pages to make it look to the user they are navigating pages but are really tabbing through a single page.
if you want to use messages (onmessage, postMessage), you can do that with frames, iframes to be specific. One parent window with two iframe windows and they can talk to each other (also over different domains, so the Same Origin Policy doesn't apply) utilizing onmessege and postMessege. If the two iframes dont load a page from the same domain, you will not be able to access the window/DOM
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
First of all I'd like to thanks in advance for your answers on this.
Currently I'm working on a site where I have a page that contains an <iframe>.
The page within the <iframe> has the Tinybox call to open the modal popup (that I want to overlay over the parent page), but the overlay stays within the <iframe>.
Is there a way to load the overlay over the parent page? If so, how do I do it?
Use this functinality in your code
window.top
For the moment, I'll just keep the script in a separate file and include that on every page.
I've got a parent page and an iframe inside that page. The links in the parent control the page that gets loaded in the iframe. What I want to do is refresh the parent page when the iframe gets loaded.
I've got this in the iframe:
RefreshParent(){
parent.location.reload();
}
<body onload="RefreshParent();">
But, the above code refreshes the whole parent page along with the iframe inside it which in turn reloads the parent page and goes into an infinite loop.
You can't refresh the parent page without reloading the iframe.
What you could do is use AJAX to update the parent's content, but that could be a fair amount of work (using the jQuery or Prototype frameworks would make this easier).
You won't need to use ajax techniques either. You can simply call a javascript function in parent page from the page contained in the iframe of parent page. This way you can easily perform actions on parent page. How to refresh parent page partially from page in iframe without affecting the iframe illustrates how.
Hope this helps.
You can't tell the parent window to refresh and exclude any part of its own page, including the iframe contained within it. You can do this using AJAX techniques though.
As long as your on the same domain you can use something like:
window.parent.location = window.parent.location + '?parent-updated=true'
You'll need to have your iframe become a "regular" frame in order to preserve it while refreshing another part of the page. Since the iframe is technically part of the parent (it's an inline frame, after all), refreshing the parent will reload the iframe content as well.
Depends what your layout is, but as other posts have observed you cannot refresh the parent frame without refreshing the iframe itself as it is part of the page.
If you do not wish to use ajax, and layout permits, one solution is to place the contents of the parent frame in an iframe itself. You can then tell the parent page to refresh the iframe containing the 'parent content' when your iframe loads. If your 'parent' iframe is borderless and there is no scrolling then this is all transparent to the user.
You could push this technique as far as a couple of iframes for the parent contents and it can be quicker and simpler to implement than ajax, beyond that you're as well to bite the bullet and implement an ajax solution.