frame doesn't work in gwt app - gwt

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.

Related

Facebook Page Plugin, adapt_container_width does ABSOLUTELY nothing

I'm trying to display the page plugin (https://developers.facebook.com/docs/plugins/page-plugin) inside a div that I set to 400px, and have the page plugin iframe adapt to this 400px width thanks to the adapt_container_width param. It doesn't work.
So, first things first, don't suggest that I set the page plugin's width to 400px directly. I'm just using this 400px on the parent as an example. Ultimately I won't know the screen size to which the parent will adapt. But I mean, if it doesn't even work with a hard-coded fixed width...
Here is the code (Vue) :
<div style="width: 400px">
<iframe
src="https://www.facebook.com/plugins/page.php?href=[...my page]&show_posts=true&width=500&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[...the app id]"
width="500" height="800"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
I've tried removing the width and height attributes, removing the width and height params in the url, setting it to 100% on one or the other... Nothing works. The iframe ends up being either 500px in width, or 300px if I don't set a width, which I guess is the default value. It never adapts to 400px.
I absolutely don't understand what that adapt_container_width=true is supposed to do or how to use it.
PS: Also, I'm using show_posts=true instead of tabs=timeline because of this other well known bug : https://developers.facebook.com/community/threads/281007613843950/. It is inconsequential to this problem.
EDIT
As suggested by a comment, I tried setting the width directly on the iframe. Setting it on the width attribute or by a style attribute doesn't work either. The only way I could MAKE IT WORK is by setting the width directly in the url parameters.
Thanks to the fact that I'm using Vue, I can modify the url dynamically on page load, so I can make it adapt to the screen size, but... I still don't understand the point of that adapt_container_width then, as I have to explicitly give it a fixed width at the deepest level I have access to.
If you're using some framework that allows you to dynamically change the HTML code at runtime like Vue, you can make the plugin responsive by modifying the width directly in the url parameters given to the iframe, with something like this :
<ClientOnly>
<iframe
:src="`https://www.facebook.com/plugins/page.php?href=[your page...]&show_posts=true&width=${screen_width}&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[your app id...]`"
:width="screen_width" height="800" style="border:none;overflow:hidden" scrolling="no"
frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>
</ClientOnly>
Where "screen_width" is a variable that contains the current screen width... For me it's a computed value on page load :
const screen_width = computed(() => {
return window.innerWidth
})
You can then set the adapt_container_width to whatever... So, if anyone still has some input on what the hell this param is for, I'm still interested. Otherwise, this is "solved".

How to getBodyElement() in RootLayoutPanel GWT

I want to make a progress bar before my application starts.
Here the code from my html page
<body>
<div id="appLoading">
<img src="images/bar.gif" />
</div>
...
</body>
And later on the client side I wrote
DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("appLoading"));
But now I'm using RootLayoutPanel and it doesn't have getBodyElement() method. So help me please explain how to remove my progress bar now.
You don't need to remove it. When you attach a RootLayoutPanel (after your app is loaded and starts), it will take over the entire browser screen, and your progress bar (and any other HTML in your host page) won't be visible.
If, for some reason, you still need to get the BodyElement, you can do it by calling
Document.get().getBody();

How to use dynamic- height feature to be used

i am writing a google gadget for gmail. i am new to gadgets.for a gadget , i wirte first an html page then converted it into Module for google gadget.i used this module spec
<Module>
<ModulePrefs title="Cloud Factor Demo" scrolling="false" description="Cloud Factor Demo Design" author="Ritesh Mehandiratta" author_email="..." author_location="Mountain View, CA">
<Require feature="dynamic-height" />
<Require feature="google.contentmatch"></Require>
</ModulePrefs>
<!-- Define the content type and display location. The settings
"html" and "card" are required for all Gmail contextual gadgets. -->
<Content type="html" view="card"><![CDATA[
but when i goto my gmail page this html is in scrolling mode. i want to make its height same as the height it take how to remove this scrolling ?? here is screenshot of scrolling
By default, gadgets are 200 pixels high. If you want to use dynamic height feature, follow the steps below,
add <Require feature="dynamic-height" /> in ModulePrefs tag, which u already did. And whenever you feel, the height should be refreshed, call gadgets.window.adjustHeight();
example - If you want it to be done during page load,
<script>
function onPageLoaded() {
gadgets.window.adjustHeight();
}
</script>
<body onload="onPageLoaded()">
For more info, follow google developers link - https://developers.google.com/gadgets/docs/ui#Dyn_Height

How can I create a resizable "like" box?

The likebox I created for nbglive.com is not resizable, no matter what method I use, and as such, it is causing great trouble as to how I can integrate it with our site without having it overlap the radio player.
Is it possible to get the like box to resize when the page is resized? I'm using twitter-bootstrap.
I am putting FB widgets (likebox and comments) into the Bootstrap's grid like this:
<div class="span4">
<div style="text-align: center;">
<div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
</div>
</div>
where url is the variable containing web URL of the FB page.
with CSS:
div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {
width: 100% !important;
}
Facebook loads its component asynchronously with styles set according to the width data attribute. I set it to some safe value: looks bad but does not overflow to other elements for different view-ports. My CSS overrides all the FB's width settings that are necessary to resize the widgets (I set 100%, so it adjusts to the containing div). It is not documented and possibly it will stop to work when FB changes their designs, so choose your default width (234px for me) wisely ;)
Example with LikeBox of at the bottom of the right-hand side panel and in the sidebar. Note the responsive behavior when you change the size of the browsers window.
Here is an easy way:
$(".fb-like-box").attr("data-width", $(document).width());
Do your cording according to your CSS as below
<div class="comment-box">
<div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>
</div><!--comment-box-->
cut and copy java-script as fb gives in headder

facebook like box stream height

How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.