JavaScript：尝试使用另一个 DIV 中的 DIV 中加载的页面中的变量答案

【问题标题】：JavaScript: Trying to use a variable from a page loaded inside a DIV in another DIVJavaScript：尝试使用另一个 DIV 中的 DIV 中加载的页面中的变量
【发布时间】：2016-07-05 10:32:54
【问题描述】：

我正在尝试使用另一个 DIV 中的 DIV 中加载的页面中的变量。

“index.html”页面上“bar”DIV 中的文本应替换为从“page.html”中选择的项目 id，该项目 id 加载为“content”DIV 中的<object></object>。

或者项目 id 至少应该存储在一个全局变量中——它也没有工作——因为当我从“index.html”页面运行一个函数来检索它时，它显示为“未定义”。

全部代码如下：

index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="index_style.css">
    <title>Access element of other DIV</title>  
</head>

<body>  

    <div id="bar">This text should be replaced by the Item ID selected below</div>

    <div id="content">

        <object type="text/html" data="page.html" width="100%" height="100%"></object>

    </div>

</body>

</html>

index_style.css

body{
margin: 0px;font-family:arial;font-size:30px;text-align:center;color:#fff;
}

#bar{
position:relative;height:100px;line-height:100px;background-color:#555c60;color:#74de90;
}

#content{
position:absolute;top:100px;bottom:0px;right:0;left:0;overflow-y:hidden;
}

page.html

<link rel="stylesheet" href="page_style.css">
<script type="text/javascript" src="main.js"></script>

<center>
This is <b>page.html</b> which has been loaded <u>inside</u> the "content" DIV<br><br>
</center>

<div class="items" onclick="use_item_id(this);" id="item1">Item 1</div>

<div class="items" onclick="use_item_id(this);" id="item2">Item 2</div>

<div class="items" onclick="use_item_id(this);" id="item3">Item 3</div>

page_style.css

body{font-family:arial;font-size:30px;color:#fff;background-color:#1b1e4b;text-align:center;}
.items{cursor:pointer;}
.items:hover{color:#ff0000;}

main.js

function use_item_id(selected)
{
current_item = selected.getAttribute("id");
document.getElementById('bar').innerHTML = current_item;
alert(current_item);
}

“main.js”中的document.getElementById('bar').innerHTML = current_item; 行似乎是问题所在，我无法让它工作。 alert(current_item); 上面的行不存在时工作正常，因此它肯定会从“page.html”中正确获取项目 ID。它只是没有将它们设置为“index.html”页面上的innerHTML，甚至没有将它们存储在一个全局变量中，以便从“index.html”页面上运行的函数中检索（如上所述）。任何代码示例将不胜感激。

我认为这可能是因为 use_item_id() 函数正在从另一个页面执行，所以我可能需要一些替代方案或其他函数才能使其工作。

如果有人知道问题所在，那就太好了。我感谢所有回复。在此先感谢:)

【问题讨论】：

标签： javascript jquery html object

【解决方案1】：

您不在同一个文档中...然后在 main.js 代替 document.getElementById('bar').innerHTML = current_item;

与

parent.document.getElementById('bar').innerHTML = current_item;

这解决了您的问题。

【讨论】：

【解决方案2】：

如果您尝试访问 HTML 文档中的变量，强烈建议使用 data attribute。这是评论部分的示例：

在我的项目中，我设置了要加载的数据键

<div class='resp-col col-12 comment-user-data'>
    <div class='resp-col col-9'>
    <div class="post-profile-image" style='background-image:url("<?=$user->profile_image?>")'></div>
    <?=Html::a("<p class='post-user'>".$username."</p>", Url::to(['/account/'.$user->id.'/'.$user->username]))?>
</div>
    <div class='resp-col col-3'><button class='reply-to' data-assoc-id='<?=$model->id?>' data-assoc-name='<?=$username?>'><i class="material-icons">reply</i></button></div> <-- set the data-assoc-id
</div>
<div class='resp-col col-12 comment-content-data'>
<?=$model->content?>
</div>

jQuery 加载数据键

$('.reply-to').on('click',function(){
    $('#submit-comment').data('assoc-id', $(this).data('assoc-id'));
    $('#comment-content').val('@'+$(this).data('assoc-name')+' ');
    $('.base-modal').animate({
scrollTop: $("#comment-content").offset().top
}, 2000);
if($('#comment-content').css('display') == 'none'){
toggleCommentVisibility();
}
});

【讨论】：