If opening a web (urlX) directly on IE8 with Chrome Frame installed all is ok. (i can see context menu as if I were in chrome).
If opening another web (y) which have piece of js code like
...
function inici(){
ifitxamd.location.replace(urlX);
}
...
<body class='dtvc_info_fons' onLoad='inici()' >
<iframe name='ifitxamd' width="100%" height="100%" frameborder="no" scrolling="auto" marginheight="0" marginwidth="0"></iframe>
</body>
This new page is loaded but no GWT application starts. It also hasn't context menu like chrome, so it's like chrome frame it's not loading.
Any Idea? Thanks.
Chrome Frame only runs for top-level content. There is no way to load iframe content with Chrome Frame unless the parent of the iframe is already rendered by Chrome Frame
Related
I've been looking for a way to fix this, by searching here, but no fix would work for it !
I'm running into an issue with Facebook iframe video integrated on my website ! (a blog)
It's displaying ok on desktop version but, when resizing the window, or going on mobile version, there is HUGE blank space created below the iframe. It is INSIDE the iframe and I have no control over it.
Desktop version looking fine
Mobile version with HUGE blank space below
Here is the iframe :
<iframe class="iframe" style="border: none; overflow: hidden;"
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fsalutparisfr%2Fvideos%2Fvb.1523831884576352%2F1642593346033538%2F%3Ftype%3D3&show_text=0&width=400"
width="600" height="460" frameborder="0" scrolling="no"
allowfullscreen="allowfullscreen"></iframe>
Here is the CSS code :
.iframe {
display: block;
margin: 0 auto;
}
Note: changing values in the iframe code didn't do the trick
Deleting all iframe css classes didn't do it either !
Tried changing the heigh value of the iframe to "100%", this is what it turned out :
Desktop version
Mobile version
It seems like facebook iframe is broken internally ?! My Vimeo and Youtube iframes work perfectly...
Any idea about this ?
Thanks !
It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
My client has a wordpress site and one page is embedding a map via iframe:
<iframe
src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"
height="350"
width="690"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe>
When I view the page in my iPhone, it renders mobile-friendly and resizes the iframe to fit the viewport, but the state and zip code are getting cut off. I tried adjusting the height of the iframe and also the bottom padding, but it seems to be something on Google's end. Any idea how to fix this? I added a blue border to my iframe so you can see that it's not the iframe which is clipping the text:
I recommend posting a link to the site or posting some of the CSS. This would make it easier for the SO community to troubleshoot the issue.
I replicated your issue by removing the iframe attribute width="690". I suspect the Wordpress CSS or some JavaScript is overriding the iframe width and cramming everything into the iPhone screen width.
To override the automatic resizing I just gave the iframe an id and set the width explicitly in my CSS.
#WidthTest {
width:690px;
}
Regardless, I'm sure you can find a similar solution by digging around the Wordpress CSS/JavaScript.
I edited the code. This works great for me! You might want to change the width according to your needs.
<iframe width="380" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"></iframe>
When I paste the iframe code directly into the source code view of TinyMCE and click save it changes the code to:
View TinyMCE code after saving adds </p>
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></p></iframe>
View HTML source of HTML page:
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"/>
Original iframecode
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
This is effecting the rest of the page layout and breaks the footer.
I am using Silverstripe 2.4.5 if this helps.
TinyMCE is not too much of an iframe fan. There are at least three (more or less) quick fixes:
If it's only for Google maps and always at a fixed position, you can use the Addressable module: http://deadlytechnology.com/silverstripe/google-map-module/
If it's only for Google maps but just anywhere in the $Content field, you might want to try short codes: http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/
Fix TinyMCE's mess on the server side within the onBeforeWrite() method: http://www.silverstripe.org/general-questions/show/16438#post305472
If you can use 2., take a look at a complete example:
PHP code: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/code/Page.php#L42
Template: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/templates/Includes/GMap.ss
Actually the easiest solution is in the TinyMCE click the little HTML icon (next to the anchor) and then paste the iframe code there. This way it will not replace the html tags to </p>
i have gwt app, and one of the 'page'(or display) has a iframe whose url point to google web page, however when deploy the app, google page doesn't show up. here is the code
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/"></g:Frame>
</div></g:HTMLPanel>
if i replace the google webpage with a static image stored locally, it show up fine:
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Image url="img/myImg.jpg"></g:Image>
</div>
</g:HTMLPanel>
can anyone tell me why it won't work with external link? Thanks
Answered on the GWT group: https://groups.google.com/d/msg/google-web-toolkit/nwlTBBVGJSA/pho1SVeviQEJ
Copied here for convenience:
Google refuses to be displayed in a frame using the X-Frame-Options HTTP header.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=7055
The code you provided creates the UI, including the frame, just fine. The thing you're not doing is setting a height and width for your frame, so it's effectively invisible. Change your code to the following and you'll see your frame.
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/" height="150px" width="150px" />
</div></g:HTMLPanel>
The reason you didn't have to specify the height and width for an image is because they are implicitly defined by the image itself. There's no way for GWT to know how big you want an iframe to render on your page, so you have to explicitly set the size.