DIV中启用了jQueryMobile的站点

Question

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

• 我有一个非常基本的.html页面，基于jQuery Mobile
• 我有另一个“正常”的网站，其中有一个 - 比方说 - 矩形div
• 我想让我的jQuery Mobile网站出现在那个div

备注：

• <iframe>是不可能的，除非你知道如何使它能够使父网站能够从localhost访问“child”，同一个域。
• 当简单地尝试将jQuery Mobile的“核心”复制粘贴到我的div （不是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

为data-role="page"添加一个Id="page" data-role="page"并给出以下css

#page{
    position:relative;
}

演示