<head>
<style>
iframe#hiddenframe {
display: none;
}
</style>
</head>
<body>
<iframe src="" id="hiddenframe"></iframe>
<img src="portait.jpg">
Launch!
</body>
So when I click the link, the rocket launches, but I stay on the page, keeping my eyes on the portrait. At least this is how it works on Chrome. Firefox still displays the blank page I loaded with "/?action=launch_rocket". I do not want to see the blank page. I want to keep looking at the portrait.
Our facility enforces using Firefox. Is there a smarter way of achieving what I want?
You need to set the name of the iframe.
...
<iframe src="" id="hiddenframe" name="hiddenframe"></iframe>
...
Related
I have a web page, the problem is that IE and MS-Edge doesn't seem to load some images. Hence I tried working on just one image, given below. This also doesn't get displayed. Everything works fine in Firefox, Chrome and Opera. Could you please tell me what the problem is??
the image
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="./images/services/2.jpg" />
</body>
</html>
js fiddle
I suggest you double check the path of the image. Maybe it helps if you drag 'n drop the image directly to IE or Edge and have a look at the address displayed in the browser...
This drives me totally crazy now. A link (http://ns.nl) on the page inside the iframe I made wont work (http://newsoundsofeurope.com/videos/playlisttest). Chrome doesn't do anything after the mouse click. Firefox just opens a blank page inside the iframe. Anyone can help?
Page with iframe:
<html>
<head>
</head>
<body>
<iframe src="playlist_iframe.php"></iframe>
</body>
</html>
Page inside iframe:
<html>
<head>
</head>
<body>
<img src="026.png"/>
</body>
</html>
Remove target="_self and will work.
If you want to open that link with a new page, you need to set the target="_blank"
<img src="026.png"/>
Also need to set the 'allow-popups' permission in the iframe
<iframe src="playlist_iframe.php" sandbox="allow-popups"></iframe>
https://www.w3schools.com/tags/att_iframe_sandbox.asp
I just switched to HTTPS on my website. I had been displaying a locally hosted PDF via an iframe; the iframe displays a small html file with the PDF embedded (as an object) in it. However, the PDF is no longer displaying. I can navigate to the PDF & it displays just fine but does not display when I load the html page. What can I do to make the PDF display?
iframe
<iframe src="/updates/update.htm" width="100%" height="800px"
marginheight="0" frameborder="0"></iframe>
update.htm
<html>
<header>
<link rel="stylesheet" href="custom-styles.css">
</style>
</header>
<body>
<object src="update.pdf"
type="application/pdf" width="100%" height="800px"><div id="show-text">
<p>It appears your web browser is not configured to display PDF files.</p>
<p><a href='update.pdf'>Click here to download the PDF file.</a></p>
</div>
</object>
</body>
</html>
custom-styles.css
#show-text {
display: block;
width: 100%;
height: 15%;
background: #D1D1D1;
}
Shot in the dark here, but are you sure that "/updates/update.htm" is the right path? If your page is www.site.com/something/index.php and you use that path, the browser will look for www.site.com/something/updates/update.htm. Perhaps you want www.site.com/updates/update.htm. Maybe you need a relative path like "../updates/update.htm"
UPDATE
Try <object data="update.pdf">. The <embed> tag uses scr=; <object> uses data= according to w3schools.
I'm working on a webpage where I need to be able to click on buttons that change iframes with in a parent page. I thought this would be a simple task but no matter what I do, the button keeps opening a new window rather than opening the page inside the iframe. The page looks perfect and the iframe loads up but when I click the button in the parent window to change the page it opens in a new tab. Here is the complete code I'm using (minus the changed webpage names) if someone could point out what I'm doing wrong please.
<head>
<style>
body
{
background-image:url(bg4.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background-size:100%;
}
p.pos_fixed
{
position:fixed;
top:98px;
right:298px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stupid webpage that dont work</title>
</head>
<body>
<p class="pos_fixed">
<iframe id="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
<center>
<a href="http://www.google.com" target="MSL">
<img src="MSL.jpg" alt="MSL" width="42" height="42"></a>
</center>
</p>
</body>
</html>
In order for your link to target the iframe, you must add the "name" attribute to such frame, nothing to do with "id"
<iframe id="MSL" name="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
Also, your DOM structure is very bad, you should not nest iFrames inside paragraphs. In short, the target attribute in anchor elements need to match the name attribute in the iFrame unless it is a reserved one such as "_blank", "_self", "_parent", or "_top".
I have nav menu html that I would like to be able to open over top of objects underneath it. Fx. An applet or an embedded pdf file. However, floating a div over an embeded element or applet doesnt work in all browsers (need safari, ie8+, firefox, chrome). By doesnt work i mean it does not appear on top.
Looking at various posts i came to the following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
<style>
div:hover {
background-color:red !important;
}
</style>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me to toggle elem (ie)</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" style="z-index:1" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
This works on all browsers now except Safari, is there anyway to make it work on Safari (I'm using 5.1.4 Windows) as well?
I see no mention of Safari on previous posts...
Thanks
I'm still looking for a solution to this myself. So far I have found nothing that works with Safari. I have tried wrapping the embedded PDF in an iframe, in a div, setting it to visibility:hidden, display:none, and/or both on a click event (so the pop-up modal dialog show up on top of the PDF area), etc. Nothing works with Safari. Here's what's really weird though. At work I'm on a Windows 7 PC and when one mouses over the icons of open apps on the taskbar, a preview window comes up with a miniature version of the app in it. When I mouse over my open Safari, the image that comes up displays my fixes working properly! And when I click on the image to get the actual Safari window to come to the forefront ... everything is "broken" again. Now THAT is BIZARRE.
Please contact me if you find a working solution for Safari, and I will do likewise.