I have a contest entry site that requires a file upload to an external service. Right now, we just have a link to that external service, but we've found that even if we open the link in a separate tab/window, users sometimes forget to come back and complete the rest of our application. (This external service has no API for allowing us to do the uploads seamlessly from our site.)
My question: is it possible to use jquery's modal dialog to open an external URL? I'm not looking to control that URL in any way; I just want to keep the users on our main page while at the same time preventing them from being able to interact with the rest of our site until they've completed the upload.
CODE
Here's what I've got so far; it's currently returning "The requested content cannot be loaded. Please try again later." regardless of whether the link contains my URL or just plain google. Also, even though I have showCloseButton set to true and the height and width attributes set, it's ignoring those params.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="../css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script>
$(function() {
$("#dropLink").click(function() {
$.fancybox({
'padding' : 0,
'modal' : true,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : 'Upload Video',
'width' : 680,
'height' : 495,
'showCloseButton' : true,
});
return false;
});
});
</script>
</head>
<body>
<p>1. Visit <a id="dropLink" href="http://www.google.com">our dropbox</a> and upload your video file. Please enter “Featured Exhibitor Program” as the subject.</p>
</body>
</html>
You can use FancyBox or any other lightbox plugin. Most of them allows you to show modal dialog with different website.
Edit:
try:
$("#dropLink").fancybox({
'width' : '680px',
'height' : '495px',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
We use FancyBox to open URLs into modals and it seems to work just fine.
Colorbox is another great solution for opening urls in modal box.
Related
Im developing my first vscode extension. trying to create webview and open a webpage inside vscode editor.
Case 1 :
Im using iframe with sandbox attributes. when i tried loading http site which runs locally, i can see js content not getting loaded in webview.
const panel = vscode.window.createWebviewPanel(
'Editor',
'Editor',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="http://localhost:8988" sandbox="allow-scripts" width="100%" height="400px"></iframe>
</body>
</html>`;
}
Case 2 :
I also tried opening https site, https://cssgradient.io/. In that site also js content is not getting loaded.
Note : No error logs in console.
Can you please let me know if im missing something?
If you can check on the console logs (by using the command: Open Webview Developer Tools), you may can see some security errors as follows.
Refused to frame 'http://127.0.0.1:3000/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors *
Refused to display document because display forbidden by X-Frame-Options.
Therefore you need to change specific Content Security Policies in-order to load your domain in an iframe.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
In my case, it works after update frame-src CSP policy.
I am trying to build a widget that other websites can include via an iframe. The plugin contains the Facebook Checkbox Plugin.
Consider the following code for the iframe:
<!DOCTYPE html>
<html>
<head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3297885870227646',
autoLogAppEvents : true,
xfbml : true,
version : 'v4.0'
});
};
</script>
<script async crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<body>
<div class="fb-messenger-checkbox"
origin="https://fb-marketing-widget.herokuapp.com/widget-iframe"
page_id="110054573751247"
messenger_app_id="3297885870227646"
user_ref="<%= userRef %>"
allow_login="true"
size="standard"
skin="light"
center_align="true">
</div>
</body>
</html>
The above code works when opening the iframe URL directly in the browser. However, when I include the same iframe in another website with a different domain, I'm getting Refused to display 'https://www.facebook.com/v4.0/plugins/messenger_checkbox.php?... in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://my-iframe-domain.com".
Please note that the iframe works when being opened directly, so this is clearly not a problem with whitelisting the domain, having the wrong app id etc.
Any input on how I can the above code as an iframe to be included in other websites would be greatly appreciated!
Facebook restricts which sites are able to frame their content, the error you see comes from your site not being allowed to frame the content from Facebook. Implementation step 1 (https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin/) for Facebook Checkbox plugin is to whitelist your domain(s): https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting. This is not something you can change on your page.
With the newest update to Word (1611) dialogs with TinyMCE causes error 12003: Invalid URL Syntax.
According to Use the Dialog API the cause is
The dialog box was directed to a URL with the HTTP protocol. HTTPS is required.
Simple example is to put below code in a dialog (oddly enough it works in a panel).
Updated code
<!DOCTYPE html>
<html>
<head>
<title>Office.js with TinyMCE</title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
(function () {
"use strict";
// The initialize function must be run each time a new page is loaded.
Office.initialize = function (reason) {
$(document).ready(function () {
tinymce.init({ selector: 'textarea' });
});
};
})();
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
Edit1: This is only a problem on Windows. On Mac it works fine.
Edit2: The code for opening the dialog
var url = 'https://' + location.host + '/dialog.html';
console.log('url: ' + url); // url: https://localhost:44341/dialog.html
Office.context.ui.displayDialogAsync(url, { height: 30, width: 20 });
12003 usually indicates you don't have https on your dialog url. This issue is more likely raised when displayDialogAsync is called, you are passing a HTTP url in the first argument.
For your html page with TinyMCE, I am able to copy-paste the entire html and open it in Office dialog. Therefore it is unlikely related to the tinyMCE.
(It will be much helpful you could share your code opening up the dialog.)
Best Regards
We've identified the issue. Turns out we are blocking the javascript: URL protocol which seems to be invoked when using TinyMCE. We are working on a fix.
I'm trying to get the registration flow for Facebook login working. Here's a bare-bones example:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxxx',
cookie:true,
status:true,
xfbml:true,
channelUrl : 'http://<myWebSite>/channel.html',
oauth:true
});
</script>
<fb:login-button registration-url="http://<myWebSite>/register"/>
</body>
</html>
(The only things I've replaced above are the website and the appID)
If I try it like this, the login button shows up, but clicking it causes FireBug to report 'Unknown status: undefined' in the browser log. If I remove the 'oauth=true' line though, it works. I'm trying to adhere to the new oauth 2.0 standard, so I'd like to leave it in. Has anyone else run into this? Seems like if this was a bug, it would have been caught pretty early on.
the 'registration-url' parameter is no longer supported by , take a look in the documentation of it. http://developers.facebook.com/docs/reference/plugins/login/
Just check if the user is logged in via the JS-SDK
I am using the facebook connect to login into my website.
In my html page i writen the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test JOpenID </title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'180065668680582',
cookie:true,
status: true,
xfbml:true
});
</script>
<fb:login-button perms="email,user_checkins">
Login with Facebook
</fb:login-button>
</body>
</html>
So when i click on Login with Facebook button a window pop up and ask to fill the username and password. Till this time everything works properly. Problem persist when i click allow button to enter into the destination web-site. A pop up window appear and disappear also. The till of the window was XD proxy and at the url it is ::
http://static.ak.fbcdn.net/connect/xd_proxy.php#cb=f183a80ac008141&origin=http%3A%2F%2F174.129.214.219%2Fff715e2f856e19&relation=opener&transport=flash&frame=f1d4f8afdf94ebe&result=%7B%22perms%22%3A%22email%2Cuser_checkins%22%2C%22selected_profiles%22%3A100001492618815%2C%22session%22%3A%22%7B%5C%22session_key%5C%22%3A%5C%222.pRXlnxq8Ig6QwZyJsG732w__.3600.1294326000-100001492618815%5C%22%2C%5C%22uid%5C%22%3A%5C%22100001492618815%5C%22%2C%5C%22expires%5C%22%3A1294326000%2C%5C%22secret%5C%22%3A%5C%225pe7qxMU_7DitJucmcyftA__%5C%22%2C%5C%22access_token%5C%22%3A%5C%22180065668680582%7C2.pRXlnxq8Ig6QwZyJsG732w__.3600.1294326000-100001492618815%7C_QjDI7eTUD32QVvapbsqxn-r4DE%5C%22%2C%5C%22sig%5C%22%3A%5C%22aa66a1d8b234ebe863e386bb8a6520e7%5C%22%7D%22%7D
As per my requirement is concerned i need after allow the facebook is should allow me to enter to the destination site which i already registered. But it only onen a window and disappear in a second.
What is the issue and how to solve tell me in details...
Thanks
don't use
FB.init({ apiKey: 'API_KEY' });
and use
FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true });
To fix it in Opera, just att the following after FB.init():
if($.browser.opera ) // it uses jQuery library here!
{
FB.XD._transport="postmessage";
FB.XD.PostMessage.init();
}
I've been experiencing the same issue in IE9, and it seemed to stem from upgrading to Flash Player 10. I'd lost hope in trying to fix it since finding an open bug at Facebook covering it. But Henson has posted an answer that fixed it for me. In the JavaScript in my site master I removed the lines
FB.UIServer.setLoadedNode = function (a, b) {
//HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
FB.UIServer._loadedNodes[a.id] = b;
};
and now it works. (N.B. I have not checked to see if the IE8 issue those lines were intended to overcome returns.)