Geek Answers Handbook

A display item from another page of my site with .document.getElementById

I have been looking for this topic for quite a few days. And could not find a working or final answer.

What I want to do is simply display a (stylized) summary of the last blog entry (from the blog page on my own site) in the div container on the main page of my site (which is not my blog). All the active links of this mirror blog entry ideally lead to the corresponding section of my blog page. This, however, is not necessary since the entire entry may link to the blog page.

Each blog summary on the blog summary page has a unique identifier sorted by number (for example, unique-ID-51 (last) unique-ID-50 (earlier), etc.). I thought about this with the document.getElementById JS command.

I would have to point the JS function to a relative location ( ../blog_folder/blog_summary.html ), perhaps with the .window.location.assign command, than capture the (stylized) content of the last element and display it on my first page.

But I have no idea how this code will look in reality. Can you point me in the right direction?

Thanks!!!!!!!

M.

+1
javascript
source share
2 answers

You can add jQuery to your page and use a simple construct:

 $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');

Example code snippet:

 ... <body> <div class="result-container">There will be your content from some file.</div> <p> <a class="result-loader" href="#"></a> <script type="text/javascript"> $(".result-loader").click(function() { //Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch'); return false; }); </script> </p> </body> ...

And this line is somewhere inside the <head> :

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Example code snippet with autostart function:

 ... <body> <div class="result-container">There will be your content from some file.</div> <p> <a class="result-loader" href="#"></a> <script type="text/javascript"> $(document).ready(function() { //Launches the code below right after the initialization event //Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch'); return false; }); </script> </p> </body> ...
+1
source share

I assume you are using a hidden iframe?

This, for example, will be the height of the style. There are other things in style.

  this.container.getElementsByTagName("YOUuniqueID")[0].style.(STYLE)

But you have to put a unique identifier in the iframe

Try using the built-in debuggers in IE or Chrome to find what you want ...

You can take a look at this, maybe some additional information (for a cross-domain), but there may be something that helps you. You might even consider using jquery to access this data.

Another cross-domain iframe resizes Q & A

0
source share

More articles:


All Articles