我可以使用document.getElementById（href）显示页面的特定部分吗？ [英] can I show a specific part of a page using document.getElementById(href)?
问题描述
如果我有一个名为内容页面的页面：
if I have a page called "content page":
<body >
<p id="part1">Tread ... inch. </p>
<p id="part2">Tread ... inch. </p>
<p id="part3">Tread ... inch.</p>
</body>
和另一个带有此java脚本的页面（关闭图标不会出现）。
and another page with this java script(code in close icon doesn't appear ).
<head>
<script type="text/javascript" src="popupBox.js"></script>
</head>
<body>
show content of part one : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
show content of part two : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
show content of part three : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
</body>
如果我想要检索要在弹出框中显示的内容页面的特定部分，是可能吗？
if I want to retrive a specific part of a content page to be shown in the popup box, is that possible?
我的意思是在popup.js的这一部分：
I mean in this part at popup.js:
var boxdiv = document.getElementById(href);
我可以在页面的href中指定标签的ID来进行检索吗？喜欢：
can I specify an ID of a tag in the href of the page to retrive it? like :
var href = an.href;
var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!");
任何想法？
推荐答案
您所要求的内容让我想起 WML 如何运作，单页上有多张卡片，一次只显示其中一张卡片。可以将一个页面的内容加载到另一个页面中，但不是您想象的方式。
What you're asking for reminds me of how WML works, with multiple cards on a single page, only one of which is shown at once. It's possible to load the content of one page in another, but not the way you envision.
正如您可能从名称中猜到的那样， getElementById 根据ID属性获取一个元素，没有别的。相反，您必须加载其他页面的内容，此时您可以按需显示其中的部分内容。
As you might guess from the name, getElementById gets an element based on the ID attribute, nothing else. Instead, you have to load the content of the other page, at which point you can show parts of it on demand.
在popupBox.js中：
In popupBox.js:
var show_hide_box;
# it may not be best to set width, height and border this early,
# but it simplifies the code below
(function(width, height, border) {
var pages = {};
function show_hide_box(link) {
var path = (/^[^#]*/.exec(link.href))[0];
if (pages[path]) {
show_content(pages[path], link);
} else {
fetch_content(link, path);
}
return false;
}
function show_content(path, link) {
var id = (/#(.*)/.exec(link.href))[1];
if (content[id]) {
# Show content[id], which is a DOM node
...
} else {
# the page exists, but not the fragment. Could search
# content.elements for the
...
}
}
function fetch_content(link, path) {
$.ajax({
url: link.href,
success: function(data, textStatus, jqXHR) {
pages[path] = {elements: $(data).filter('p')};
pages[path].elements.each(function (idx, elt){
# TODO: handle elements w/ no id
pages[path][elt.id] = elt;
});
show_hide_box(link);
},
error: function(jqXHR, textStatus, errorThrown) {
# Can't load the content, so just load the page.
window.location.href = link.href;
}
);
}
window.show_hide_box = show_hide_box;
})(400,400,'2px solid');
$(function() {
$('.external_content').click(function(evt) {
show_hide_box(this);
evt.preventDefault();
});
});
在另一页：
<body>
show content of <a href="TreadDepth.html#part1" class="external_content">part one</a>.
show content of <a href="TreadDepth.html#part2" class="external_content">part two</a>.
show content of <a href="TreadDepth.html#part3" class="external_content">part three</a>.
</body>
在脚本中订阅事件监听器通常被认为是更好的形式，而不是 HTML inline 。此外，请勿使用点击此处获取链接文字。
It's generally considered better form to subscribe event listeners in a script, rather than inline in HTML. Also, don't use "click here" for link text.
这篇关于我可以使用document.getElementById（href）显示页面的特定部分吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
