Javascript 使用.document.getElementById显示我网站上其他页面中的元素_Javascript_Mirror

Javascript 使用.document.getElementById显示我网站上其他页面中的元素

javascript

Javascript 使用.document.getElementById显示我网站上其他页面中的元素,javascript,mirror,Javascript,Mirror,我已经研究这个问题好几天了。找不到有效的或结论性的答案我想做的是，在我的站点（不是我的博客）首页的div容器中简单地显示最新博客条目（来自我自己站点的博客页面）的（样式化）摘要。镜像博客条目的所有活动链接理想情况下都会指向我博客页面的相应部分。但是，这不是必须的，只要整个条目可以链接到博客页面博客摘要页面上的每个博客条目摘要都有一个唯一的ID，按数字排序（例如，unique-ID-51（最新版本）unique-ID-50（之前的版本）等）我正在考虑使用document.getElement

我已经研究这个问题好几天了。找不到有效的或结论性的答案

我想做的是，在我的站点（不是我的博客）首页的div容器中简单地显示最新博客条目（来自我自己站点的博客页面）的（样式化）摘要。镜像博客条目的所有活动链接理想情况下都会指向我博客页面的相应部分。但是，这不是必须的，只要整个条目可以链接到博客页面

博客摘要页面上的每个博客条目摘要都有一个唯一的ID，按数字排序（例如，

unique-ID-51

（最新版本）

unique-ID-50

（之前的版本）等）我正在考虑使用

document.getElementById

JS命令来实现这一点

我必须将JS函数指向相对位置（

。/blog\u文件夹/blog\u summary.html

），可能还有

.window.location.assign

命令，然后获取最新元素的（样式化）内容并将其显示在我的首页上

但我不知道这段代码在现实中会是什么样子。你能给我指一下正确的方向吗

谢谢你

我想您使用的是隐藏的iframe

例如，这将改变样式的高度。。这种风格还有其他东西

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

但是您必须在iframe中放置一个唯一的ID

尝试使用IE或Chrome中的内置调试器来查找您想要的

你可以在这里查看更多的信息（跨域的），但可能会有一些帮助你。您甚至可以考虑使用jQuery访问该数据。

我假设您使用的是隐藏的iframe

例如，这将改变样式的高度。。这种风格还有其他东西

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

但是您必须在iframe中放置一个唯一的ID

尝试使用IE或Chrome中的内置调试器来查找您想要的

你可以在这里查看更多的信息（跨域的），但可能会有一些帮助你。您甚至可以考虑使用jQuery访问该数据。

您可以将jQuery添加到页面中，并使用简单的结构：

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

代码块示例：

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

。。。
将有一些文件中的内容。

$（“.result loader”）。单击（函数（）{
//用适当的值替换要获取的元素的path/to/your/file.html和#id_
$（'.result container'）.load（'path/to/your/file.html#id_of_element_to_fetch'）；
返回false；
});

...

以及

标记中的某个字符串：

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

具有autostart功能的代码块示例：

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

。。。
将有一些文件中的内容。

$（document）.ready（function（）{//在初始化事件之后立即启动下面的代码
//用适当的值替换要获取的元素的path/to/your/file.html和#id_
$（'.result container'）.load（'path/to/your/file.html#id_of_element_to_fetch'）；
返回false；
});

...

您可以将jQuery添加到页面中，并使用简单的结构：

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

代码块示例：

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

。。。
将有一些文件中的内容。

$（“.result loader”）。单击（函数（）{
//用适当的值替换要获取的元素的path/to/your/file.html和#id_
$（'.result container'）.load（'path/to/your/file.html#id_of_element_to_fetch'）；
返回false；
});

...

以及

标记中的某个字符串：

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

具有autostart功能的代码块示例：

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

。。。
将有一些文件中的内容。

$（document）.ready（function（）{//在初始化事件之后立即启动下面的代码
//用适当的值替换要获取的元素的path/to/your/file.html和#id_
$（'.result container'）.load（'path/to/your/file.html#id_of_element_to_fetch'）；
返回false；
});

...

您愿意使用库提供帮助吗？（jQuery、Prototype等）我当然喜欢。使用JQueryAr进行实验您是否愿意使用库来提供帮助？（jQuery、Prototype等）我当然喜欢。用jqueryc做实验你能详细说明一下吗？我已经实现了jQuery，但还没有完全理解您的代码行。。。。把它放在一个盒子里？“.result container”位是什么意思？我的新部门的名字？而且，如果目标元素（#id_of_element）是#内容容器的一部分，它会被提取吗？因此，当我执行以下操作：$（#result container'）.load（'path/to/your/file.html#id_of#u element_to_fetch'）；页面会自动从起始页面（加载的内容应该出现的地方）转发到目标页面（内容应该来自的地方）。。。。在我的回答中添加了一些细节。非常感谢-我比前几天走得更远了…好的，现在在插入链接文本后，点击就可以了…（不过我指的是我自己的jQuery（1.6.1.min））。它正在加载博客条目的文本、H1、所有标签等以及格式——但没有包含图片——这里是一个示例博客条目：剩下的两个大问题是，a）如何在没有“单击”的情况下完成此操作（自动加载）和b）如何加载图像b）您应该修改

结果容器

容器内任何图像的

href

属性（它应该包含图像的完整绝对路径）：

$（'.result container img'）.attr（“href”http://site.address.com/“+$（'.result container img'）.attr（“href”）