Display element from other page on my site with .document.getElementById

问题

I have been searching about this subject now for quite a few days. And could not find a working or conclusive answer.

What I want to do, is to simply display the (styled) summary of the latest blog entry (from the blog page on my own site) in a div container on the front page of my site (which is not my blog). All active links of that mirrored blog entry ideally lead to the appropriate section of my blog page. That is however not a must, as long as the entire entry can link to the blog page.

Each blog entry summary on the blog summary page has a unique ID, sorted by numbers (e.g. unique-ID-51 (latest) unique-ID-50 (the one before) etc.) I was thinking of doing so with the document.getElementById JS command.

I would have to point the JS function to a relative location (../blog_folder/blog_summary.html) with maybe the .window.location.assign command, than grab the (styled) contents of the latest element and display that on my front page.

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

Thank you !!!!!!!

回答1:

You could add jQuery to your page and use a simple construction:

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

An example chunk of code:

...
<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 that string somewhere inside the <head> tag:

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

An example chunk of code with an autostart feature:

...
<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>
...

回答2:

I assume you are using a hidden iframe?

This for example will thet the height of the style.. there are other things in the style

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

But you have to put an unique ID in the iframe

Try and use the built in debuggers in IE or Chrome to find what you want...

You can take a look at this for maybe some more info(its for cross domain) but there could be something taht helps you. You might even consider using jquery to access that data.

Yet Another cross-domain iframe resize Q&A

来源：https://stackoverflow.com/questions/6001118/display-element-from-other-page-on-my-site-with-document-getelementbyid

标签

javascript

mirror