Question

我有一个不寻常的情况，我需要在多个页面上显示相同的“永久”div，但不允许浏览器在页面更改之间重新加载。换句话说，我需要加载新页面并“在下面滑动”永久div。永久的div需要能够被移动。下面是我想要完成的一个粗略的例子：

enter image description here

我可以使用jq load完成我需要做的大部分工作：

$('div#outerContainer').load('/page-one.html', function()  {
        console.log ('first load performed') ;
});

是否有某种方法使用jQuery创建相当于“符号链接”的unix - 而不是链接，而是unix让我们做“ln -s”的方式，以便文件一次出现在两个或多个地方？

我考虑过永久div不可见然后克隆它，但div包含一个外部iframe，我不能在页面上同时拥有两个相同的iframe。我还考虑将永久div保存到变量中，但这意味着我必须销毁永久div，这也不起作用。

或者有没有人有更好的方法来解决这个问题？

非常感谢你。

修改

以下是我所追求的实例。我有一个 parent.html ，在初始页面加载时首先调用 child-1.html 。那么 child-1.html 可以请求加载 child-2.html ，反之亦然，在这个简单的例子中。

div＃masterContainer是需要在每个页面上显示的div。我发现我最初可以将零像素零像素，因此它是不可见的。（总是欢迎更好的想法，并且非常感谢）

这不是理想的解决方案，因为我使用窗口调整大小和绝对位置值来移动div＃masterContainer。如果有更好的解决方案将div＃masterContainer锚定到div＃childContainer，这将是最佳答案。

parent.html：

<script type='text/javascript'>
    $( document ).ready(function() {
            nextPage("child-1.html");
            return false;
    });
    nextPage.initialLoad    = true;
    function nextPage(nextPageHtml) {
            if  ( nextPage.initialLoad )    {
                    nextPage.initialLoad = false    ;
                    $('div#masterContainer').css(
                            {       'width'         :       '300px'
                            ,       'height '       :       '200px'
                            ,       'position'      :       'absolute'
                            }
                    );
            }
            $('div#masterPageHolder')
               .empty()
               .load( nextPageHtml
                    , function(responseTxt, statusTxt, xhr) {
                         alignDiv();
                      }
                    );
            $(window).resize(function()     {
                    alignDiv();
            });
    }
    function alignDiv()     {
            var p = $('div#childContainer');
            $('div#masterContainer').css(
                            {       'left'  :       p.position().left
                            ,       'top'   :       p.position().top
                            }
                    );
    }
</script>
<div id='masterPageHolder'></div>
<div id='masterContainer' 
 style='position:  relative  ; 
        height:    0px       ;  
        width:     0px       ; 
        overflow:  none      ; 
        border:    2px dotted red;'>
            this is the masterContainer 
            surrounded by a 2px dotted red border
</div>

子-1.HTML：

<div style='height: 40%;'>
<a href='#' onClick='javascript:nextPage("child-2.html");'>child-2.html</a>
</div>
<div style='margin-left: 50%'>
        <div id='childContainer' style='width: 300px; height: 250px;' />
</div>
this is the child-1.html webpage

子-2.HTML：

<div style='height: 20%;'>
<a href='#' onClick='javascript:nextPage("child-1.html");'>child-1.html</a>
</div>
<div style='margin-left: 20%;'>
        <div id='childContainer' style='width: 300px; height: 250px;' />
</div>
this is the child-2.html webpage

非常感谢任何其他建议。

Answer 1

＆＃34; 我考虑让永久div不可见，然后克隆它，但div包含一个外部iframe，我不能同时在页面上有两个相同的iframe ＆＃34 ;

var newDiv = $('.permanent-div').clone().find('iframe').remove();

也许这会解决您的问题，但如果不是，您需要制作结果，并希望通过将您的代码添加到您的问题中来更加清晰。

将div显示在不同的网页上

1 个答案: