Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://static.ak.facebook.com"

Question

I am implementing fb login in my php website. when i am trying to signup user using his fb account it gives following error-

Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://static.ak.facebook.com". The frame being accessed set "document.domain" to "facebook.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access.

in my php page i have used-

<script>
        window.fbAsyncInit = function() {
            FB.init({
                appId: 'myappId',
                xfbml: true,
                version: 'v2.1',
                 cookie     : true
            });
        };

        (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 = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

my login code is -

function statusChangeCallback(response) {

if (response.status === 'connected') {
    // Logged into your app and Facebook.
    isFbSignUp(response, function(res) {
        if (res) {
            window.location = "profile.php";
        } else {

            $("#loginPopup").css("dispaly", "none");
            $("#signupPopup").css("display", "block");
            FB.api('/me', function(response) {
                console.log(response);
                $("#fbName").val(response.name);
                $("#fbMail").val(response.email);
                $("#socialId").val(response.id);
                $("#socialType").val("fb");
            });
        }
    });

} else if (response.status === 'not_authorized') {
    // The person is logged into Facebook, but not your app.
    document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
} else {
    // The person is not logged into Facebook, so we're not sure if
    // they are logged into this app or not.
    document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
}

}

//this code is causing error -

function socialSignUp() {
var urlString = "Service/socialSignup.php";
var form = new Object();
form.socialId = $("#socialId").val;
form.type = $("#type").val();
form.name = $("#fbName").val();
form.mail = $("#fbMail").val();
form.phone = $("#fbPhone").val();
form.address = $("#fbAddress").val();
$.ajax({
    type: 'POST',
    data: form,
    url: urlString,
    success: function(resultData) {
        if (resultData == 1) {
            window.location("profile.php");

        }
    },
    error: function(resultData) {
        alert(resultData);
    }
});

}

please help.