javascript - DIV 中支持 jQueryMobile 的站点

Question

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

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

注释:

• <iframe> s 是不可能的，除非你知道我如何让它与能够从本地主机访问“子”、相同域的父网站一起工作。
• 当简单地尝试将 jQuery Mobile 的“核心”复制粘贴到我的 div 中时(不是外部标签，只是主页 + 必要的脚本)页面确实显示了，尽管实际上是一团糟。

有什么想法吗？

---

更新:这是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