I am building an application with BuildFire.JS, and my app uses WebRTC. I look through how BuildFire works, and it embeds the Widget inside an iFrame when the app is being displayed in the plug-in interface. The IFrame looks as such:
<iframe id="widget" style="height: 100%; width: 100%; padding-top: 49px;" ng-style="{'padding-top': showNavigationBar ? '49px' : '0px' }" class="pluginFrame" seamless="" allowfullscreen="" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" ng-src="http://localhost:8080/widget/index.html?fid=widget&appcontext=%xxxxxxxx"></iframe>
For my WebRTC components work, I need the iframe in the plugin interface to have the following options:
<iframe allow="camera; microphone" ></iframe>
Otherwise the camera will be blocked. How can I added to the IFrame in BuildJS to allow access to the camera and mic?
SDK 1.65.2 has now support for required allow attributes (Android, iOS, Plugin Tester) and native permission requests for Android and iOS
Check the following new SDK functions:
https://sdk.buildfire.com/docs/camera/#isauthorized
https://sdk.buildfire.com/docs/camera/#requestauthorization
I am not sure if this is hacky or not, but to fix the issue I found the iframe was being generated in the file pluginTester/index.html
So I added the following to the iframe in the file, linke 153:
<iframe allow="camera; microphone" id="widget" ng-src="{{widgetSrc}}" style="height:100%; width:100%;" ng-style="{'padding-top': showNavigationBar ? '49px' : '0px' }" class="pluginFrame" seamless allowfullscreen sandbox="allow-scripts allow-forms allow-same-origin allow-popups"></iframe>
Feels hacky but it worked. This won't carry over to other clients who don't do the same modification, it would be nice if the allow functionality could be set in a configuration option.
If anyone has a better way, Im all ears.
Related
The question may seem confusing so let me clarify.
Github lets you see the source code of a files in a repo. I want to include them in iframes but am unsure how and suspect someone has already done this before.
In my case I want to add https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee to an iframe so that from my website people can see the code as it evolves.
A GitHub page itself wouldn't be put directly in a iframe (because of the X-Frame-Options: deny HTTP header).
That leaves you with the GitHub API for contents
GET /repos/:owner/:repo/contents/:path
Like: https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.
You should be able to put that content in a iframe (as in this answer)
Here's a concrete example of how this can be done via the GitHub API. We request the encoded content and insert it directly into the iframe.
<iframe id="github-iframe" src=""></iframe>
<script>
fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
.then(function(response) {
return response.json();
}).then(function(data) {
var iframe = document.getElementById('github-iframe');
iframe.src = 'data:text/html;base64,' + encodeURIComponent(data['content']);
});
</script>
Here's the code in action https://jsfiddle.net/j8brpdsg/2/
I just found a way to do this using Gist-it
Usage
Take a github file url and prefix it with http://gist-it.appspot.com and embed the result within a tag:
<script src="http://gist-it.appspot.com/http://github.com/$file"></script>
Here's a test I just made. Works! :)
You'll need to hack the iframe and css a bit to get it to work without tags in your document, but it's possible:
https://www.arctype.co/blog/embedding-github-gists-via-iframe
<iframe frameborder=0 style="min-width: 200px; width: 60%; height: 460px;" scrolling="no" seamless="seamless" srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src="https://gist.github.com/sundbry/55bb902b66a39c0ff83629d9a8015ca4.js"></script></body></html>'></iframe>
I couldn't find any solutions on google which can make the newly introduced facebook posts embed to responsive. Does anyone got a solution or tricks? Thanks
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore">Post by Facebook Security.</div></div>
Set data-width to auto to use fluid width:
<div class="fb-post" data-href="url" data-width="auto"></div>
I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-width attribute, we can listen for width changes on our page, update the data-width attributes and then re-render the plugins.
See http://jsfiddle.net/brohde/GRcen/
Usage: $('#post').autoResizeFbPost();
Plugin logic:
On document ready:
Save original HTML of $('#post') to preserve any <div class="fb-post"> elements – the Facebook SDK removes this from the DOM.
The Fix: Update all <div class="fb-post"> elements with the correct data-width attribute (Uses $('#post').width() ).
On window resize, run The Fix again and also call FB.XFBML.parse(); to render the Facebook plugin(s). The plugin will wait 1 second after the last window resize to avoid multiple DOM updates and FB.XFBML.parse(); calls.
If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:
Can I customize how the post is displayed on my web page?
Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.
If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.
Details:
Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.
Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:
[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.
so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...
Another option would have been to just try on an http:// site only. At that point, I got the following errors:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
This confirms my suspicion -- you need an app ID. I added an app ID and it works.
Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.
Added - style="overflow-x: auto; max-width: 100%;"
To result in the following fb-post portion of the embed;
<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">
If you want a little more elegance can always implement styling on the scrollbar.
CSS Webkit Scrollbars - http://css-tricks.com/custom-scrollbars-in-webkit/
jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/
Hope someone finds this useful.
If yours posts are video, you can use Embed Videos instead of Embed Posts, they are responsive. You can get all others datas from open graph and create your own design.
https://developers.facebook.com/docs/plugins/embedded-video-player
Using SOAP call I am getting a URL and displaying in iframe.That URL contents one form, User need to fill all data and submit it. While I am invoking SOAP function, has given one return link also which one redirecting to my site.But problem is while returning that page is coming inside the iframe. My requirement is pretty clear that it should redirect to given path not inside iframe.
I do appreciate for advance help.
Here is the code for Iframe
<iframe style="width:955px;height:700px;margin: 0px auto;" src="<?php echo $response_data['Url']?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen id="js-signFrame">
</iframe>
If you have control over both the host website and the iframe content you can use easyXDM to transfer messages between the iframe and the site (of course you can use HTML5 socket but easyXDM have a great fallback mechanism which supports older browsers as well).
You can use the message logic to alter window.location of the parent window.
Here is a POC I made to show how to transfer data between different domains without getting caught by browser's same-origin-policy, you can use it as reference.
link:
https://github.com/eitankw/cross-domain
Hy here is a examle
Example
Why when i use
<IFRAME sandbox="allow-forms allow-scripts" SRC="http://roshare.info/embedx-xcnvxz71l8fb-699x380.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=699 HEIGHT=400></IFRAME>
sandbox i dont see the player .. i want to use sandbox just to block pop-ups but looks like if i use it i dont see the player
is there any allow-objects ?
I have also a no sandbox example on that page and it works ..
You're correct. The sandbox will block plugin content inside the frame. Unlike other aspects of the sandbox, there is no mechanism for enabling plugins inside a sandboxed iframe. http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/#granular-control-over-capabilities has more detail if you're curious.
I'm using embed code to do live stream and the embed code like youtube one works perfectly
but some of them I have to use code such as iframe the fullscreen feature doesn't work.
<iframe src="linkhere" width="600" height="450"/>
and I can not toggle the video into fullscreen
will it be any possible way to make it fullscreen if they click on the option?
or will it be any other embed code that similar to iframe to use?
Your problem could be that the flash plugin recognises iframe as your "fullscreen"..
When looking at the youtube embed code, i recognised a function "allowfullscreen" within the iframe definition
make sure you also have this part in your code..
<iframe width="560" height="315" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0" **allowfullscreen**></iframe>
else there might be another option beside an iframe..