Question

好的，这就是我想要实现的目标：

我有一个非常基本的.html页面，基于jQuery Mobile
我有另一个，＃34;正常＆＃34;网站上有一个 - 让我们说 - 矩形div在其中
我想让我的jQuery Mobile网站出现在div

注意：

<iframe>是不可能的，除非您知道如何使其能够使父网站能够从localhost访问＆＃34; child＆＃34;，same-domain。 / LI>
当只是试图复制粘贴＆＃34;核心＆＃34;我的div里面的jQuery Mobile（不是outter标签，只是主页面和必要的脚本）页面确实出现了，虽然实际上非常混乱。

有什么想法吗？

更新：以下是jsfiddle：http://jsfiddle.net/X5xys/

代码......

HTML：

<div id="preview"> 
    <div id="iframe">
        <div data-role="page">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div data-role="content">
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
            </div>
        </div>          
    </div>
</div>

CSS：

        #preview {
            margin:50px auto;
            background-size: 376px 678px;
            width: 376px; max-width: 376px;
            height: 678px; max-height: 678px;
            text-align: center;
        }

        #preview #iframe {
            margin:92px auto;
            border:1px solid black;
            width:320px; max-width: 320px;
            height:480px; max-height: 480px;

        }

Answer 1

为您Id="page"添加data-role="page"并提供以下css

#page{
    position:relative;
}

Demo

DIV中启用了jQueryMobile的站点

1 个答案: