Question

我有2个HTML文件Home.html＆amp; test.html文件。我正在使用javascript将test.html加载到Home.html的DIV中。当我尝试使用getElementsByClassName来获取Test.html中的元素时，它不会返回任何内容。我在这做错了什么？当我点击Home.html页面中的网址时，它应该如右图所示加载？为什么不呢？

1.jpg
2.jpg

我查看了此处发布的其他问题，但我无法找到问题所在。我在Windows 7中使用chrome运行它。

我是HTML设计的新手，请温柔！

Home.html中

<html>
<head></head>
<body>

<script type="text/javascript">
var x;
var i;
var txt;
function foo()
{
    x = document.getElementsByClassName("gallery");
    for (i = 0; i < x.length; i++) {
            txt = txt + x.elements[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML='<object type="text/html" data=txt ></object>';
}
function load_test(){
        document.getElementById("content").innerHTML='<object type="text/html" data="test.html" ></object>';
}
</script>

<div id="topBar"> 
    <a href ="#" onclick="load_test()"> HOME </a> 
    <a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

</body>
</html>

的test.html

aaaaaaaaaaaaaaaaaaaaaaaaaa
</br><img class="gallery" id="gallery" src="1.jpg" border="0" />
</br><img class="gallery" src="2.jpg" border="0" />

Answer 1

有一些问题。

txt需要初始化为空字符串，因为你要附加它。

x没有名为elements的媒体资源;相反，它是getElementsByClassName()返回的元素数组，在这种情况下，它们是<img>元素，具有src属性。

由于您在循环中构建HTML字符串，因此我不确定您使用<object>标记的原因。试一试：

    var x;
    var i;
    var txt = "";
    function foo() {
        x = document.getElementsByClassName("gallery");
        for (i = 0; i < x.length; i++) {
            //txt = txt + x.elements[i].src + "<br>";
            txt = txt + x[i].src.replace(/^.*[\\\/]/, '') + "<br/>";    // use this regex to get only the filename as in your example
        }
        //document.getElementById("txt").innerHTML = '<object type="text/html" data=txt ></object>';
        document.getElementById("txt").innerHTML = txt;
    }
    function load_test() {
        document.getElementById("content").innerHTML = '<object type="text/html" data="test.html" ></object>';
    }

Answer 2

数组elements中没有名为x的属性。在迭代元素时，设置var txt的行需要如下：

txt = txt + x[i].src + "<br>";

Answer 3

不确定load_test（）函数应该做什么，但我改变了html，因为我认为你想要做什么？

<html>
<head></head>
<body>

<script type="text/javascript">
var x;
var i;
var txt = "";
function foo()
{
    x = document.getElementsByClassName("gallery");
    for (i = 0; i < x.length; i++) {
            txt = txt + x[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML=txt;
}
function load_test(){
        document.getElementById("content").innerHTML='<object type="text/html" data="test.html" >      </object>';
}
</script>

<div id="topBar"> 
<a href ="#" onclick="load_test()"> HOME </a> 
<a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

</body>
</html>

我基本上改变的是你的txt变量没有被初始化，你在数组上使用了一个不存在的“elements”属性，你只需要使用索引来访问它。

Answer 4

有几个问题：

变量＆＃34; txt＆＃34;需要在函数中定义＆＃34; foo（）＆＃34 ;;你试图在函数之外定义它，但实际上你在这里定义它：txt = txt + x.elements[i].src + "<br>";但是如果你在这里定义它，它自己的定义包含它自己（txt = txt + ...），所以它将包含单词＆＃34; undefined＆＃34;。（希望这很有意义。）
您用来获取图片来源的代码不正确;而不是x.elements[i].src，请使用x[i].src。
需要使用ajax获取第二个HTML文件中的内容。为此，我将创建一个隐藏的div，因此您可以将第二个HTML文件中的内容加载到那里，然后在脚本中使用它。（在下面的例子中，我给了隐藏的div id =＆＃34; ajaxContent＆＃34;。）

以下是我将如何更改您的剧本：

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        xmlhttp.responseText;
        document.getElementById("ajaxContent").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET","test.html",true);
xmlhttp.send();

function foo()
{
    x = document.getElementsByClassName("gallery");
    txt = '';
    for (i = 0; i < x.length; i++) {
        txt = txt + x[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML = txt;
}

＆＃34; new＆＃34; Home.html的HTML（只是底部隐藏的div）：

<div id="topBar"> 
    <a href ="#" onclick="load_test()"> HOME </a> 
    <a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

<div id="ajaxContent" style="display: none;"></div>

这里有一个小提琴（没有ajax部分 - 我不认为你可以用JSFiddle做ajax）：http://jsfiddle.net/Niffler/pnv1jy1m/

（我不知道你在做什么＆＃34;对象＆＃34;事情，所以在我的脚本中我把它改成只输出文本......）

Answer 5

由于JavaScript的范围规则，它无法找到您的foo函数。

如果您希望全局访问foo，请按以下方式定义：

document.foo = function()
{
//...etc

getElementsByClassName不在div元素中工作

5 个答案: