I have a page with two iframes - sidebar and content. The sidebar has links that targets the content iframe, so any links that are clicked on the sidebar will load on the content iframe.
I would like the sidebar to refresh whenever a page on the content iframe is loaded. What code would I need to add to the "content" pages to do this?
Any help is greatly appreciated!
Providing they're in the same domain, you should be able to do something like this:
window
.parent
.document
.getElementById('id_of_sidebar')
.contentWindow
.location
.reload()
Written in a cascading style because that's the way I like it. Feel free to put the whitespace wherever you like. :)
Disclaimer: I have not tested the above.
Related
First a short introduction to understand my problem.
My company uses a restricted community system for the intranet, which does not allow the use of javascript in pages. You can only place code through an internal editor and javascript will be deleted automatically after saving. My workaround is to use the community page as parent page and load my content, located on a sharepoint, through an iframe. This is not elegant but works perfect, no problems and I am able to use javascript. I have asked our IT and got the permission for this.
What I want to do
I want to add a vertical menu bar, which stays in a fixed position on the left side. Solution one is to code this menu bar in each parent page using html and css. This works fine, but if I have changes on the menu I have to update the code in each parent page. This is time consuming and could be error prone.
More elegant would be to save the menu bar in a seperate file and load this file in each page. While the parent page could not use javascript I have to load it through the iframe page.
iframe call inside parent page:
<iframe src="https://sharepoint.abc.com/index.aspx"></iframe>
loading the menu through the iframe page "index.aspx":
<div id="includedMenuBar"></div>
<script src="demo/js/jquery-3.2.1.js"></script>
<script>
$(function(){
$("#includedMenuBar").load("menubar.aspx");
});
</script>
This works perfect, but now the used css position: fixed; and top: 100px; for the menu orientate at the iframe page index.aspx. If I now scroll the parent page the menu bar is fixed to the iframe page but scrolls, because the iframe pages moves throug the scrolling of the parent page.
To solve this I tried iframe-position-fixed-polyfill which works perfect but needs the same domain for parent and iframe page. But my parent page loads from the company intranet and my iframe page loads from a sharepoint. So I need a cross-domain-communication.
A solution could be a cross-domain-event-handler like PostEvent. But I could not place any javascript on the parent page.
Problem
How can I get the iframe-position-fixed-polyfill work even if I need a cross-domain-communication and can not place any javascript inside the parent page?
Maybe there is a simpler solution for a fixed menu bar loaded through the iframe page I do not see?
Thanks a lot for your help.
Best regards,
Michael
Oh my god. Keep it simple should be the device. My solution which works for me. Load the menubar through another iframe in the parent page. Make this iframe fixed through an enclosed div.
<div style="position: fixed; top: 385px">
<iframe src="menubar.html" style="border: currentColor; border-image: none; overflow: hidden;" width="110" height="300"></iframe>
</div>
No scipt language is necessary.
I'm trying to build a web app (HTML/Bootstrap/jquery) which has header,footer,leftnav and right pane. The content of the right pane would be a separate html page which will be loaded based on what is clicked in the left nav.
I got individual pages with HTML for header/footer/leftnav replicated for each content page. But I only would like to have the right pane content to be loaded without reloading the other components.
Heres an example, upon click on left nav item.. only the content of the right pane changes:
http://play.raaga.com/myraaga
Appreciate any help, thanks!
You could use the ".load()" function of jquery.
$('selector-of-the-panel').load('url');
jQuery .load() docs
The example you included looks pretty close to jQuery UI's .tabs() widget, which you can use with ajax to load your different html pages: http://jqueryui.com/tabs/#ajax For a vertical nav-like look, see: http://jqueryui.com/tabs/#vertical
Ok so any help here would be great
I have a HTML page with an I frame loading a site of mine in it…
What I need to do is check in the iframe from the main document, the target attribute of a link and if it's blank, hijack it and add my own custom functionality from outside of the iframe in the main HTML document
The issue I have is the site being loaded in to the frame is on a different domain so I am not sure if this can be done? I have full control of the site been loaded in to the I frame so is there something in there I can set to allow it?
What I effectively want to do is hijack the links in an iframe which I guess could be an issue?
Can this be done, alternately does anyone know a way I could achieve what I am trying to do?
Thanks
I have a page that shares the same footer / header layout and design.
I am looking for sample javascript code that allows clicking on menu to reload center panel only. I am not doing it in JSP. I hope to get some sample javascript code.
Can I put the center panel in an iFrame or another type of widget?
What is the most efficient way to do this?
Thanks a lot.
From this question
document.getElementById('iframeid').src = document.getElementById('iframeid').src
However, this if your header and footer are in frames, or if your body is in a frame, just to make them resuable, this is a Bad Idea! Your server should be generating a SINGLE PAGE by using a layout page for the header and footer, and rendering the body.
Is it possible to build a Firefox extension that displays a floating, persistent iFrame over the page content?
I know it's possible to add iFrames using XUL. For instance, you can add an iFrame to a persistent sidebar. However, I want the iFrame to float over the page content, not cause the content to shrink. So far, my only option is to add the iFrame to the DOM, then use CSS "fixed" positioning to float the iFrame.
The iFrame must also persist across page loads, exactly as the sidebar does. Adding an iFrame to the DOM, unfortunately, causes the iFrame to vanish when the browser renders a new page (e.g., after clicking a link).
Any clues?
Thanks!
Another add-on you can look at is Shopping Helper It has an iframe at the bottom whenever the page is displayed a product
Yes. I was able to do this by setting the attribute noautohide in the panel you use.
E.g.
<panel id="yourOverlay" noautohide="true">
You might be able to do something like this with Greasemonkey, it allows you to customize how web pages look and you could make your script available to others.