top.frames不会在Chrome中工作 [英] top.frames wont work in chrome
问题描述
我有3个html页面。 main.html，page1.html和page2.html。我使用以下代码在main.html中显示page1.html和page2.html。
<！DOCTYPE html>
< html>
< frameset frameborder =1rows =50％，*>
< frame name =f1src =Page1.html/>
< / frameset>
< / html>
page1.html代码
<！DOCTYPE html>
< html>
< head>
< style>
.content {display：none;}
< / style>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>
< script src =myjs.js>< / script>
< / head>
< body>
< table id =resultDetailsborder =1>
< th>结果详情< / th>
< tr>
< td>
点击我可在其他页面查看更多详情
< div class =content>
< p> R1数据< / p>
< / div>
< / td>
< / tr>
< / table>
< / body>
< / html>
和Page2.html代码
<！DOCTYPE html>
< html>
< body>
< div id =myDiv>
< / div>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>
< script src =myjs.js>< / script>
< / body>
< / html>
我的JavaScript myjs.js
<$ p $ （'click'，'tr'，function（）{
var doc（'）'$（$'$'$'$' = window.top.frames ['f2']。document;
var divElmnt = $（doc.getElementById（'myDiv'））;
$（divElmnt.html（$（this ）.find（'。content'）。html（）））;
}）;
}）;
使用此代码，在点击表行时，我可以显示divcontent内容在页面2的mydivdiv中。
这适用于IE和FF，但不适用于Chrome。错误：doc是未定义的。
chrome的window.top.frames ['f2']的等价物是什么。
本地文件的Chrome安全标志，即file：///。使用--allow-file-access-from-files标志选项启动Chrome后，top.frames可以正常工作。
另外我发现了一个关于JavaScript间帧通信的有用文档这里。
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined. What is the equivalent for window.top.frames['f2'] for chrome.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.
这篇关于top.frames不会在Chrome中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
