How to append a DIV Banner Block to a HTML Page using jQuery
I am using jQuery 1.3.2 and I was wondering if the following is achievable and if so, how can it be done.
Basically, I have an iframe src page that displays a report to a user. Now because it's in a开发者_JS百科n iframe, there is no banner on that page but I do allow the user to detach the iframe into a new browser window using window.open, so that they can see more info.
My question is, as I am opening the iframe page into a new browser, I need to manipulate the html and append, at body part of the page, a div section, that contains a banner.
Basically, in this div, I have my company's banner (logo and name), I just need a means of attaching this to the top of the page when a user detaches the page from the iframe.
The cleaner way would be having class in html or body tag, which you switch after 'detaching' iframe. While page is in iframe class is for example 'in-iframe'.
And you have CSS like:
.in-iframe #banner, .in-iframe #footer {
display: none;
}
So the banner will be actually always on the page, but sometimes it will be hidden.
IFrame html (note link with anchor for iframe):
<iframe src="/report/xxx/#hidebanner"></iframe>
<a href="/report/xxx/" target="_blank">open report in separate window</a>
Report page html:
...
<html>
...
<body>
<script> if (location.hash == '#hidebanner') { $('body').addClass('in-iframe'); } </script>
...
加载中,请稍侯......
精彩评论