搜尋

首頁  >  問答  >  主體

javascript - 使用jquery中load載入另一個html頁面,能操作另一個頁面中元素麼

使用jquery中load載入另一個html頁面,能操作另一個頁面中元素麼

淡淡烟草味淡淡烟草味2769 天前664

全部回覆(3)我來回復

  • 大家讲道理

    大家讲道理2017-05-19 10:38:43

    如果想要在本頁面中,完整的載入一個子頁面話,不建議直接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

    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
  • 天蓬老师

    天蓬老师2017-05-19 10:38:43

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

    回覆
    0
  • 取消回覆