I'm having some weird iframe problems with firefox. I'm using 4.0.1.
I'm embedding a gcal. Here's the code
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=400&wkst=1&bgcolor=%23FFFFFF&src=oliversong%40comcast.net&color=%23182C57&ctz=America%2FNew_York" style=" border-width:0 " width="500" height="400" frameborder="0" scrolling="no"></iframe>
And this gcal works perfectly in chrome and opera, just doesn't display at all in firefox. The html isn't called at all, and it just displays an empty iframe with empty and elements.
Funny thing is if I put two of the same iframe consecutively, the second iframe will appear correctly.
I tried doing
<iframe style="display:none"></iframe>
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=400&wkst=1&bgcolor=%23FFFFFF&src=oliversong%40comcast.net&color=%23182C57&ctz=America%2FNew_York" style=" border-width:0 " width="500" height="400" frameborder="0" scrolling="no"></iframe>
and to my utter suprise this does what I want it to.
This is super juke-y though and I don't want to leave it at that.
WHY DOESN'T IFRAME WORK IN FIREFOX?
//edit
Another thing: the iframe appears correctly on the google page, where they provide you with the code to embed.
That leads me to believe that my own site is the problem, but I have no idea why that would be the case, because I have no css or javascript targeting iframes or the div containing it. It also doesn't explain why it only happens in firefox. I also tried flushing the cache and clearing cookies and everything.
You need to escape your ampersands (&). Leave them unescaped could mean the URL is being misread.
Related
I have a html structure like this
<html>
<body>
<iframe srcdoc="HTMLDOC"></iframe>
<body>
</html>
where HTMLDOC is a HTML doc which has some <img> tags that show images in my server that the user must be authenticated to see.
This works flawlessly on Chrome, but when trying on Firefox the requests made from the browser to fetch these images do not send the user's cookies, and thus the images are not downloaded, (since the server thinks that the user is not authenticated).
If I convert the iframe to a "classic" iframe, like this:
<iframe src="URL INSIDE MY SERVER"></iframe>
where URL INSIDE MY SERVER is an endpoint that serves the same HTMLDOC it works both in Chrome and Firefox, sending the appropriate cookies in the requests to fetch the images.
I've tried as well to add the parameter sandbox="allow-same-origin allow-top-navigation allow-scripts" to the iframe using srcdoc, to no avail.
What's weird is that if this is a same-origin situation I can't think a clearer same-origin that having the page in the HTML itself, so I don't know if I'm missing something.
I'm not sure whether the implement differences between Chrome and Firefox are, but I use some DOM manipulations to bypass this issue:
<html>
<body>
<iframe onload="fillIframe(this);"></iframe>
</body>
</html>
<script type="text/javascript">
function fillIframe(o) {
o.contentWindow.document.body.innerHTML = "HTMLDOC";
}
</script>
Sample Javascript code to replace iFrame embedded web application with AJAX (NO jQuery please)
Hi, I have a simple 'parent' html page with a 'child' iframe that loads another external web application from a different domain.
Here is the parent html page: https://shared-testing.s3-us-west-1.amazonaws.com/Example-iFrame-Web-App.html
The Problem: This simple page works fine on desktop browsers like chrome/Safari. But When I open the same link on my iphone safari/chrome, the web-app shows login screen. So basically what worked in desktop browser is not working in mobile Safari/Chrome.
(I don't understand iframes more than the simple syntax, but it seems there is some issue with how 3rd party cookies are handled in the mobile browsers... but how come it works on desktop browser and not on mobile browsers???... I am pretty confused about this point and I may be wrong about this thesis.)
From what I learned so far, iframes are less desirable (as per some experts, and I am not), I am inclining towards replacing the iFrame with a simple that our AJAX code will replace with the external web-app and show the application as before in my parent html page.
I am sure this is not the first time this has come up but after searching a lot, I was not able to find some example code that will help me do this without jQuery. I want to use plain Javascript for this and avoid jQuery.
So if you can help with either one of the following, I'd greatly appreciate it:
Why is the current html parent behaving differently in desktop
browsers versus the mobile browsers? Any ideas to make it work
consistently in all size browsers?
Sample code to replace the iframe with pure javascript AJAX approach to load the web-application.
Thanks a lot.
Copying the simple html parent file below:
<html>
<head>
<title>Sample Web-App Embedded in iFrame </title>
<style>
.example-container{
background-color:#bffdf6;
width: 100%;
padding: 30px;
}
.example-iframe{
margin: 0 auto;
display: block;
}
</style>
</head>
<body >
<div class="example-container">
<h3> This a test web page for embedding an interactive flowchart using iframe.</h3>
<iframe class="example-iframe" height="600px" width="550px" src="https://www.decizone.com/47/qZPlK2ezwIK8x3bO/How-to-Measure-Shipment-Delivery-Success-KPI/Ship-Delvry-KPI/id/5AKwBABWqJgLs1IUfqrEh1ARDstiBMcy ">
<p>Your browser does not support iframes.</p>
</iframe>
<p> <strong>NOTE:</strong>: Try opening this page on desktop as well as mobile browsers to test.</p>
</div>
</body>
</html>
I have a page with a container that gets different content from an ajax request. This content has a form that posts data (and a file) to an iframe that is also in this ajax content container. I can submit the form and it works perfectly in Chrome, but Firefox and IE just sit there like I never clicked the submit button. I have default security settings on each browser, and don't want to change them for this functionality. Can anyone see any bugs in my code or process that would cause this? thanks in advance!
form:
<form action='processUploadFrame.php' method='post' enctype='multipart/form-data' id='myForm' target='iframeUpload'>
<input type='submit' value='Upload' />
iframe:
<iframe name='iframeUpload' frameborder=1 width=750 height=150></iframe>
Solved. My HTML 101 has failed me. Having my submit button in a different table cell than the rest of the form doesn't work in IE and FF, but Chrome is okay with it. Strange. A simple javascript submit link did the trick:
<a href='javascript:document.getElementById(\"myForm\").submit();'>Submit</a>
Here's an article that reminded me about the rules of such: http://www.cs.tut.fi/~jkorpela/forms/tables.html
So I have nearly finished working on an a eCommerce platform with Magento and we are now running Remarketing campaigns via Google's Ad Display Network.
Now...
If you look here: http://img211.imageshack.us/img211/8859/52447256.jpg
I had placed the remarketing tag underneath my footer links and it has caused those links to be shifted on the bottom and in the center where as before it was flush and tidy on the right hand side in line with the newsletter opt-in form.
What's causing this is the iframe width. If I set '300' to '0' then its back to how it should be and perfectly in line.
Now the problem...
I placed this remarketing tag in magento and the code does not provide any iframe html code. I checked the footer by going to:
\MY WEBSITE\html\app\design\frontend\base\default\template\page\html\footer.phtml
What did I find? Barely anything lol. So now I am confused as to where this iframe was created and how to solve it. Any ideas would highly be appreciated!
Steve.
I ran into same problem just yesterday while working in a shitty Comarch Aurum CMS and was looking for a safe solution which wouldn't get me banned:
Google remarketing tag - iframe height issue
so if anyone else has this problem, the most common solution is to insert the conversion.js script tag into a hidden div:
<div style="display: none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script>
</div>
src:
keanrichmond.com/google-remarketing-messing-with-my-design.html
I've got an iframe application that's working fine and rendering fbml in facebook. But the whole app is built using ajax calls to load large chunks of pages. Several of these have < fb: tags that aren't being rendered when they load. I tried the code below, which is then loaded into a div in my index page, but it doesn't show anything at all, no html, no fb rendering, nothing. Can someone please tell me what I'm missing?? Thanks so much!!
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:serverfbml style="width: 600px;">
<script type="text/fbml">
<fb:fbml>
<!-- all of my html and my php and my fb tags go in here, for example: -->
<fb:name uid="my_real_user_id" useyou=\"false\"></fb:name>
</fb:fbml>
</script>
</fb:serverfbml>
I hope my question was clear. If not, just let me know I'll explain in more detail! :P
have look at this question
Loading Facebook fb:profile-pic via AJAX in Facebook Connect site