使用JQuery在移动应用程序中的div中查看网页时遇到问题

Question

My code works fine when viewing the web page on a computer, but when I use the emulator or iPhone with xCode the entire page does not load. 在计算机上查看网页时，我的代码工作正常，但是当我将模拟器或iPhone与xCode一起使用时，不会加载整个页面。 Perhaps the top 10 - 25% of the page appears and the rest is cut off. 可能会出现页面的前10％到25％，而其余部分会被截断。 Below is an example of code. 下面是代码示例。 All help is appreciated! 感谢所有帮助！

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>


        object {
            width: 100%;
            min-height: 100%;
        }       


    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <link rel="stylesheet" href="css/jquery-mobile-slide-menu.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-mobile-slide-menu.js"></script>
    <script>

    function MyFunction(id) {
        var num=id;

        if (num == "foxnews") {
            $("#content").mobile.loadPage("http://m.foxnews.com");
        }
        if (num == "cnn") {
            $('#content').load('http://m.cnn.com');
            $('#content').trigger("pagecreate").trigger("refresh");
        }

        if (num == "home") {
            location.reload();
        }

        //$("#content").html('<object data="http://www.foxnews.com" />');
        //document.getElementById("content").innerHTML="<img src='Background.png'>";
    }
    </script>
</head>
<body>

    <div id="side-menu">
    <ul>
        <li><a id="home" href="" onclick="MyFunction(this.id);">Home</a></li>
        <li><a id="cnn" href="#" onclick="MyFunction(this.id);">&nbsp&nbsp&nbspCNN</a></li>
        <li><a id="foxnews" href="#" onclick="MyFunction(this.id);">&nbsp&nbsp&nbspFox News</a></li>
        <li><a href="/page-2/">Page 2</a><span class="icon"></span></li>
        <li><a href="/page-3/">Page 3</a><span class="icon"></span></li>
    </ul>
</div>
<div data-role="page" id="about-the-band" data-title="Page Title" data-theme="b" class="pages">
    <div data-role="header" data-theme="b">
        <a href="#" class="showMenu" data-role="button" data-icon="grid" data-iconpos="notext">Menu</a>
        <h1>Header</h1>
    </div>

    <div id="content" data-role="content">
        <p>Content Goes Here</p>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#side-menu').slideMenu();
    });
</script>
</body>
</html>

Answer 1

keyword: crossdomain 关键字：跨域

Excerpt from deprecated Jquery Mobile: "When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true." 摘录自已弃用的Jquery Mobile：“当jQuery Mobile尝试加载外部页面时，请求将通过$ .mobile.loadPage（）运行。仅在$ .mobile.allowCrossDomainPages配置选项设置为true时，这才允许跨域请求”。

Load page to a div jQuery Mobile : 将页面加载到div jQuery Mobile中：

$("#landingPage").live('pageinit', function() {
            jQuery.support.cors = true;
            $.mobile.allowCrossDomainPages=true;
        });

but maybe i am completely on the wrong scent; 但是也许我完全错了气味； but you should open a jsfiddle, otherwise its just like searching a needle in a haystack. 但您应该打开一个jsfiddle，否则就像在大海捞针中搜索一样。

使用JQuery在移动应用程序中的div中查看网页时遇到问题

问题描述

1 个解决方案

解决方案1
0 2014-05-13 18:15:35

使用JQuery在移动应用程序中的div中查看网页时遇到问题

问题描述

1 个解决方案

解决方案1 0 2014-05-13 18:15:35

解决方案1
0 2014-05-13 18:15:35