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>
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?
I mean in this part at popup.js:
var boxdiv = document.getElementById(href);
开发者_开发技巧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!");
any idea?
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.
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.
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();
});
});
In the other page:
<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>
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.
What you basically want, as I understood it, is to show content of a given URL in a box/container/view on your site.
There are some ways to achive this. Here are two of them:
- The most recommanded is to load the content via ajax. (The link goes to the jQuery Ajax Documentation - jQuery will make your live easier ;-) )
- An other way could be to use iFrames.
No man. Its not possible.
I have checked your code and found the original site where it was posted.
The URL: http://example.nemikor.com/creating-dialogs-on-demand/
If you check on the three links on that site, you can see that each three of those links reference three different uris.
加载中,请稍侯......
精彩评论