Display element from other page on my site with .d

2019-08-02 17:37发布

站内问答 / JavaScript
1673 2 6

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

M.

2条回答
太酷不给撩
2楼-- · 2019-08-02 17:53

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>
...
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
3楼-- · 2019-08-02 18:08

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)