Facebook使用jquerymobile框架工作

facebook using jquerymobile frame work

本文关键字：工作框架 jquerymobile 使用 Facebook 更新时间：2023-09-26

我正在尝试实现facebook的基本功能，如更新facebook个人资料，以及使用jquerymobile框架工作的facebook登录。使用此链接http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/

它可以很好地与HTML 5格式。但是当我与JqueryMobile集成时，我得到一个错误，上面写着未捕获的异常:不能调用appendChild方法。

我将代码粘贴在这里，请查看并告诉我问题所在。

<body> 
<script type="text/javascript">
window.fbAsyncInit = function() {
                FB.init({appId: 'xxxxxxxxxxxxxx', status: true, cookie: true, xfbml: true});

                /* All the events registered */
                FB.Event.subscribe('auth.login', function(response) {
                    // do something with response
                    login();
                });
                FB.Event.subscribe('auth.logout', function(response) {
                    // do something with response
                    logout();
                });

                FB.getLoginStatus(function(response) {
                    if (response.session) {
                        // logged in and connected user, someone you know
                        login();
                    }
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e); //i am getting error in the is line
            });

            function login(){
                FB.api('/me', function(response) {
                    document.getElementById('login').style.display = "block";
                    document.getElementById('login').innerHTML = response.name + " succsessfully logged in!";
                });
            }
            function logout(){
                document.getElementById('login').style.display = "none";
            }

            //stream publish method
            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
                FB.ui(
                {
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [
                        { text: hrefTitle, href: hrefLink }
                    ],
                    user_prompt_message: userPrompt
                },
                function(response) {

                });

            }
            function showStream(){
                FB.api('/me', function(response) {
                    //console.log(response.id);
                    streamPublish(response.name, 'Something ', 'hrefTitle', 'http://www.ffff.com', "Share www.ffffff.com");
                });
            }

            function share(){
                var share = {
                    method: 'stream.share',
                    u: 'http://www.fffffff.com'
                };

                FB.ui(share, function(response) { console.log(response); });
            }

            function graphStreamPublish(){
                var body = 'hsdfkjasdkjfadkjf;adlfj';
                FB.api('/me/feed', 'post', { message: body }, function(response) {
                    if (!response || response.error) {
                        alert('Error occured');
                    } else {
                        alert('Post ID: ' + response.id);
                    }
                });
            }

            function fqlQuery(){
                FB.api('/me', function(response) {
                     var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);
                     query.wait(function(rows) {

                       document.getElementById('name').innerHTML =
                         'Your name: ' + rows[0].name + "<br />" +
                         '<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";
                     });
                });
            }

            function setStatus(){
                status1 = document.getElementById('status').value;
                FB.api(
                  {
                    method: 'status.set',
                    status: status1
                  },
                  function(response) {
                    if (response == 0){
                        alert('Your facebook status not updated. Give Status Update Permission.');
                    }
                    else{
                        alert('Your facebook status updated');
                    }
                  }
                );
            }
            </script>
<div data-role="page">
    <div data-role="header">
        <h1>Foofys-Facebook Page</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <p>you are using foofys facebook app</p>
         <div id="fb-root"></div>
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"> </fb:login-button>

        <p>
            <a href="#" onclick="showStream(); return false;">Publish Wall Post</a> |
           <!-- <a href="#" onclick="share(); return false;">Share With Your Friends</a> | -->
            <a href="#" onclick="graphStreamPublish(); return false;">Publish Stream</a> |
           <!-- <a href="#" onclick="fqlQuery(); return false;">FQL Query Example</a> -->
        </p>

        <textarea id="status" cols="50" rows="5">Write your status here'</textarea>
        <br />
      <!--  <a href="#" onclick="setStatus(); return false;">Status Set Using Legacy Api Call</a> -->

        <br /><br /><br />
        <div id="login" style ="display:none"></div>
        <div id="name"></div>       
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>

我无法理解代码中发生了什么，顺便说一句，我刚刚指出了我到底在哪里得到错误。

JQM和FB api的技巧是使用图形api。也就是说，不要使用简单的javascript FB包装器，因为它们在暴露于JQM的页面处理时是不稳定的——相反，只需使用新的图形/rest API，检查并避免多次初始化FB核心和您的设置。例如

function updateUserInfo(uid, accessToken) {
    var uri = "https://graph.facebook.com/" + uid;
    console.log("About to call FP.api with URI " + uri);    
    $.ajax({
                type: "GET",
                url: "https://graph.facebook.com/" + uid,
                dataType: "json",
                success: 
                    (function (response) {
                        console.log("About to call check profile ...");
                        $("#p_name").val(response.name);
                        $("#email").val(response.email);
                        $("#fb_id").val(response.id);
                        $.ajax({
                            type: "POST",
                            url: "/check_profile",
                            cache: false,
                            data: {fb_id: response.id},
                            success: onCheckSuccess,
                            error: onError
                        });
                        console.log("FB id: " + response.id);                     
                    }),
                error: onError
         });