页面中包含多个ifame框架,且在同一域名下,ifame的id是随机生成的。怎样在遍历ifame的id值后,获取里面的ul>li>a,并修改a标签中的属性值呢?
例如:其中某个ifame页面中包含下面的列表:
<ul>
<li><a href="aa.html">链接aa>li>
<li><a href="bb.html">链接ba>li>
<li><a href="cc.html">链接ca>li>
<li><a href="dd.html">链接da>li>
ul>
怎样动态获取ifame中所有的a标签,然后做出比如:创建一个data属性,然后把href=""中的链接值放到data里,再给href替换成javascript:void(0)
目前可以取到ifame的id值,不知道如何进一步实现类似上面的结果。请哪位朋友帮忙指点下,谢谢了。
<html>
<head>
<meta charset="utf-8">
<title>获取多个ifame中子元素title>
<script src="jquery-2.2.4.min.js" type="text/javascript">script>
head>
<body>
<input type="button" id="cs" value="测试修改">
<div id="views">
<div id="view1">
<iframe id="7a9deda549af" src="1.html" >
div>
<div id="view2">
<iframe id="7a9deda549af" src="2.html">
div>
div>
<script>
$(document).ready(function(){
$('#cs').click(function(){
var ifames = [];
$("iframe").each(function(){
var ifid = $(this).attr('id');
ifames.push(ifid);
})
console.log(ifames);
})
});
script>
body>
html>
要操作iframe前提是不能跨域,本地file浏览不用用webkit核心浏览器,默认不允许操作,出现跨域错误,jquery可以用jquery对象的contents方法得到iframe内部作用域
示例代码如下
<html>
<head>
<meta charset="utf-8">
<title>获取多个ifame中子元素</title>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input type="button" id="cs" value="测试修改">
<div id="views">
<div id="view1">
<iframe id="7a9deda549af" src="1.html"></iframe>
</div>
<div id="view2">
<iframe id="7a9deda549af" src="2.html"></iframe>
</div>
</div>
<script>
$(document).ready(function () {
$('#cs').click(function () {
var ifames = [];
$("iframe").each(function () {
var ifid = $(this).attr('id');
var ctx = $(this).contents();//得到内部iframe
ctx.find('a').attr('data', function () { $(this).attr('href') }).attr('href','javascript:void(0)')
ifames.push(ifid);
})
console.log(ifames);
})
});
</script>
</body>
</html>
chrome本地file测试要想访问iframe,可以按照下面的文章配置过