简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 使用jquery中load加载另一个html页面，能操作另一个页面中元素么
淡淡烟草味
淡淡烟草味 2017-05-19 10:36:43
0
3
562

使用jquery中load加载另一个html页面，能操作另一个页面中元素么

淡淡烟草味
淡淡烟草味

全部回复(3)
大家讲道理
大家讲道理2017-05-19 10:38:43 3 楼

如果想要在本页面中，完整的加载一个子页面话，不建议直接load到本页面的元素上的哦；

你看这种解决方案会不会好一点：

一般做法是，先把这个子页面，通过修改src属性，加载在iframe里（这样子页面和母页面都有各自独立的作用域，最大限度的减少各种冲突）；

下一步就是取得iframe子页面中的window对象，以后就可以通过这个子页面的window对象，获取子页面对应的元素并且进行操作咯：

<iframe src="动态替换这个属性即可"></iframe>
// 获取iframe子页面的window对象
var iframeWindow = document.getElementById('iframe的id').contentWindow;
// 获取子页面的元素
var element = iframeWindow.document.getElementById('子页面中某个元素的id');

// jquery版
var iframeWindow = $('iframe的选择器').prop('contentWindow');
var element = $(iframeWindow).find('要获取元素的选择器');
点赞 +0
添加回复
巴扎黑
巴扎黑2017-05-19 10:38:43 2 楼

index是被load的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="demo">
  我是load页面
</p>
</body>
</html>

test是执行load的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="p">

</p>
</body>
<script src="jquery.js"></script>
<script>
$("#p").load("index.html",function () {
    console.log($(".demo").html())//打印出来
    $(".demo").html(
        "<span>load出来的页面 更改内容</span>" +
        "<span>哈哈哈</span>"
    )
})

</script>
</html>

点赞 +0
添加回复
Peter_Zhu
Peter_Zhu2017-05-19 10:38:43 1 楼

你load完就可以随便操作了。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！