I have an iFrame that I use to display different media types by setting the "src" attribute. When I set the src to a .png file type however, Firefox does not render the image for me, but instead asks the user if they want to download the image.
Is there a way to force it to render? Is this a client issue / feature or is it something I've missed?
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://localhost:54468/Docs/Media/Partners/Logos/logo.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
The src property of an iframe is not meant to be an image but rather an URL of page containing HTML. Firefox is asking you to download the image because the server is writing the image bytes to the response stream.
Use an img element to display images.
I tested your code but using a different image source:
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
I think the problem is not related to Firefox or HTML, I guess it is the header your server is sending. HTTP header may force the browser to download instead of visualizing.
Please test my code in your specific Firefox version.
Related
I have some code to take content out of a page within an iframe and adding it to the parent page. The parent and iframe source page are in the same directory so no cross domain issues.
This will work on a server but apparently not if all the files are running local on your computer. I was tearing my hair out before I figured that out. Running the files locally just gives cont2 an undefined value.
I need to run this locally without a server because of the sensitivity of the files I'm dealing with. I don't know how to do that though.
I tried setting document.domain="local.com" in both files but that didn't work.
Any way to do this?
Thanks
Parent Page:
<html><head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script></head><body>
<iframe id="frame1" src="page1.html"></iframe><br>
<button id="button2">Something</button>
<script>$("#button2").click(function(){
cont2 = $("#frame1").contents().find("div").html();
console.log(cont2);
$("#div2").html(cont2);
});</script>
<div id="div2">TBD</div>
</body></html>
iFrame Source:
<html>
<head></head>
<body>
<div id="div1">TODO write content</div>
</body>
</html>
Some versions of IE will allow this to work out of the box. Seems like it treats local files as on the same server.
For Chrome, you need to temporarily disable a couple things. See:
Disable same origin policy in Chrome
Good Afternoon, I created a banner ad in HTML5 using div containers and css3 animation. I submitted my banner to who i needed to submit it to and they responded they want a gif file. I'm a little confused as to what they need. how do i convert the html5 to a gif. It seems they're following XAXIS/Google ADX criteria. I know that they do not actually want an animated gif, but are looking for a backup of sorts. Never dealt with this type of stuff so your help is greatly appreciated. Here's the documentation:
Initial Load - 200kb
Secondary Load
Max Additional Load - 1 MB
Max number of file requests – 15
Backup static image must be supplied separate from the HTML5 zip for trafficking
DCM doesn’t accept HTML files which are made using the SWIFFY tool
HMTL must include at least 1 clickTAG (See Below for the clickTag supported by DCM)
<html>
<head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type='text/javascript'>
var clickTag = 'https://www.google.com';
</script>
</head>
<body>
[The rest of your creative code goes here.]
</html>
Please ensure that your creative uses the clicktag variable as the click-through URL:
<a href='javascript:window.open(window.clickTag)'>
<img src='images/dclk.png' border=0>
</a>
</body>
</html>
All banners require a static backup gif (or jpg, or png) that displays when the animated version fails to load. If you don't have a Photoshop layout to make a static version from you can do this:
Run the banner locally in your browser
Take a screenshot of the frame you want for the static version
Crop the image down to banner size & save as gif, jpg, png or whatever
I want to display a google map in IFrame with scrollbar.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
A website
<br />
<iframe src="http://parkall.hu/teszt/parkolok/index.html"
style="overflow: scroll; width: 540px; height: 630px;"></iframe>
</body>
</html>
It works in the latest firefox (v17), but not in Chrome (v23), strangely enough Chrome displays scrollbars for a moment and hides after that. The scrollbar is still useable if you find out to grab an invisible thing....
Have you ever noticed this? Maybe it can be solved with a CSS but i was unable to find out, the scrolling="yes" attribute is not supported in HTML5. And of course if I change scr to wikipedia.org it displays scroll bar.
There is a decent chance that google maps tries to disable the scrollbar from its iframe with javascript. In that case you will need some javascript of your own to counter that a few seconds after pageload (by using setTimeout()).
What you need to change in your setTimeout depends on what is happening that hides the scrollbars. Since the example is not complete, I can't determine what happens exactly.
Please put your code in jsfiddle.net and reply with the link so we can check the exact problem.
I am at an absolute loss in this situation. I've tried changing the src value of an iframe with pure JS and jQuery, but both attempts just close the iframe object!
I have an iframe in the HTML as defined:
<body>
<div id="divBody">
<img src="images/test.gif" onClick="...see_below..." />
<iframe name="ifTarget" id="ifTarget" src="http://www.yahoo.com" allowtransparency="true" scrolling="auto"></iframe>
</div>
</body>
I also have an img on the page that, when clicked, should change the src of that iframe as defined:
document.getElementById('ifTarget').setAttribute('src', 'http://www.google.com');
and alternatively via jQuery:
$('#ifTarget').attr('src','http://www.google.com');
In both cases, the iframe just closes down an I'm left with the following error via FF Error Console:
Security Error: Content at https://www.google.com/ may not load data from http://127.0.0.1/.
I am running this from the local computer, but I get this same message if run from a hosting company (with the trialing URI adjusted accordingly). Any thoughts?
Thanks,
Dave
I have a page located at:
http://localhost:8080/job/demo/865/parsed_console/?
Inside that page is an iFrame:
<iframe width="100%" scrolling="auto" height="600" frameborder="0" src="job/demo/865/parsed_console/log.html"></iframe>
Within the iFrame there are anchor tags which I can browse to with a link like the one below:
http://localhost:8080/job/demo/865/parsed_console/job/demo/865/parsed_console/log_content.html#ERROR1
The problem is that if I use the above link I am directed to a page that does not have the outer frame. I don't have source control over either page.
How can I make a link that will go directly to a specific location in the iFrame without losing outer frame?
I believe the solution to this is to change the src attribute of the iframe element to include the fragment which you wish to scroll into view. This would be achieved using Javascript.
http://localhost/ is only visible from your computer.
<iframe name="blah"></iframe>
<a href="http://www.yahoo.com" target="blah">
In your link add a target attribute for example: <a href="..." target="name_of_iframe"/> where name_of_iframe the value of the name attribute on the iframe tag for example: <iframe name=name_of_iframe"></iframe>
Look for an id tag in the html page at the specific spot you want the iFrame to open at. Then hash tag it in your iFrame
For instance the page you load in your iFrame may have - id="autolog" - or - input id="un"- etc.,
Hash tag the id in your iFrame like so:
<iframe src="https://sitethatloadsiniFrame.com#slogin;" frameborder="0" height="98"
width="225" style="float: right; frameborder="0"; SCROLLING=YES></iframe>