关于内容传递的想法。需要帮助
Posted
技术标签:
【中文标题】关于内容传递的想法。需要帮助【英文标题】：Idea on content passing. Help needed 【发布时间】：2012-04-17 14:29:41 【问题描述】：核心问题
我需要帮助想出一个概念来实现我的目标。我无法想出如何使用我选择的方法正确导航 DOM 的想法。
目标
你应该先知道我在做什么：
我使用 ajax 将 html 内容调用到模板的 <section> 元素中。然后，我从这些 HTML 内容中调用一个带有子导航的 class="pageNav" 标记元素，并将其复制到位于主模板中的 id="subNav"。当从 onStateChange 事件调用新内容时，我会这样做：
function subNavContent ( )
var navContent = document.getElementsByClassName('pageNav')[0];
document.getElementById('subNav').innerHTML = navContent.innerHTML;
现在我这样做的问题是我必须分配正确的数组值来实现这一点：
// i is the current content pages sub navigation
navContent = document.getElementsByClassName('pageNav')[i]
为了更清楚，class="pageNav" 只有在用户调用页面内容时才会加载到 DOM 中，这就是指定 navContent[i] 位置的原因。所以这是我的困境。
示例：主页已加载contentNav[0] 位置。接下来由用户加载联系人，这将是class="pageNav" 的contentNav[1] 位置。
真正的问题？
是否有某种方法可以在页面加载到 DOM 时传递页面的数组值，就像在我的示例中一样？
我可以在复制后从 DOM 中删除 class="pageNav" 的内容，以便在运行下一页时将 class="pageNav" 的数组值重置为 navContent[0]？
我的想法进一步努力
我一直在玩弄这个想法，但没有成功。我的想法是在像这样传输之后从 DOM 中删除该内容的 class="pageNav"：
function subNavClear ( )
var wrap = document.getElementById('contentBody');
var nav = document.getElementsByClassName('pageNav')[0];
wrap.removeChild(nav);
因此生成的函数将按以下顺序启动：
subNavContent ( );
subNavClear ( );
我认为这可以让我不必担心contentNav[0] 的数组值。我会认为，因为我在创建和复制它之后从 DOM 中删除了它，所以下一个要加载的将被分配contentNav[0]。
如果您喜欢，请查看：The Mind Company。
每个请求的片段 此代码按照说明执行。
html:
<body>
<!-- Header Areas: (Constent visual)-->
<header>
<div id="headTopRow">
<div id="headerElement">
<nav id="subNav" class="aniSubNavOpen drop-shadow lifted">
</nav>
</div>
</div>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<br>
<section class="aniDown" id="homePage">
<script>checkPage ( 'homePage', 'home.html', 'main');</script>
</section>
<section class="aniDown" id="aboutPage"></section>
<section class="aniDown" id="lessonsPage"></section>
<section class="aniDown" id="productPage"></section>
<section class="aniDown" id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer>
</footer>
</body>
转换函数：
function subNavContent ( )
var navContent = document.getElementsByClassName('pageNav')[0];
document.getElementById('subNav').innerHTML = navContent.innerHTML;
function sectionAssure( classID, url )
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++)
if (sel[i].id == classID)
tmp = 'block';
else
tmp = 'none';
sel[i].style.display = tmp;
function loadContent ( classID, url, type )
var xmlhttp;
if ( window.XMLHttpRequest )
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function ()
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
document.getElementById( classID ).innerHTML=xmlhttp.responseText;
subNavContent ( );
;
xmlhttp.open( "GET", url, true );
xmlhttp.send( );
return;
function checkPage ( classID, url )
sectionAssure ( classID, url );
loadContent ( classID, url );
解决方案！！
感谢@Dennis 给了我这个想法。虽然我用了不同的方法，但原理是一样的。
function subNavContent ( classID )
var sec = document.getElementById( classID );
document.getElementById('subNav').innerHTML = sec.getElementsByClassName('pageNav')[0].innerHTML;
【问题讨论】：
很难说出你在问什么，虽然我可以看到你付出了一些努力 @Juan Mendes 我知道。抱歉，也许我可以为您和其他人澄清一下？这个问题已经很长了，我不想让它更长。 你应该看看 pjax：pjax.heroku.com @Billy Moon 谢谢，但到目前为止我一直避免使用 jQuery，并且不打算为一个函数加载这么大的东西。 您有我们可以查看的示例页面吗？ 【参考方案1】：您可以使用类，而不是手动设置display:block 和display:none。选择 .active 部分，然后从那里选择 pageNav：
var navContent = document.getElementsByClassName('active')[0].getElementsByClassName('pageNav')[0]
CSS
#contentBody > section display:none;
#contentBody > section.active display: block;
【讨论】：
在您的 javascript 示例中，我是否必须使用我的 html 结构为“.active”调用正确的数组值。我会认为由于我的结构，活动块会以相同的方式加载到 DOM 中（即用户订单选择）。虽然这确实给了我一个想法。 感谢您的想法，尽管我采取了不同的方式，但基本概念是相同的。相反，我现在使用以下内容：'document.getElementById('subNav').innerHTML = document.getElementById(classID).getElementsByClassName('pageNav')[0].innerHTML;' 可见部分将是唯一具有active 类的部分，因此您无需从元素数组中进行选择。【参考方案2】：
处理页面状态并检测应该可见的内容的一个好方法是 html5 历史 API。它还有一个优点是 url 会随着内容的变化而更新（我在“头脑公司”中缺少的东西）。查看 Mozilla 页面或 google 一些示例。 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
【讨论】：
其他页面元素恢复到之前的状态不是问题吗？ 我看到一个函数可以帮助 replaceState();哦，男孩，更多阅读！古怪的网络。谢谢，我会进一步研究这个 我不知道如何使用这种方法来做我需要的事情，但这确实帮助我更接近我的深层链接想法。以上是关于关于内容传递的想法。需要帮助的主要内容，如果未能解决你的问题，请参考以下文章