搜尋

首頁  >  問答  >  主體

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

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

淡淡烟草味淡淡烟草味2863 天前733

全部回覆(3)我來回復

  • 大家讲道理

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

    如果想要在本頁面中，完整的載入一個子頁面話，不建議直接load到本頁面的元素上的哦；

    你看這種解決方案會不會好一點：

    一般做法是，先把這個子頁面，透過修改src屬性，載入在iframe裡（這樣子頁面和母頁面都有各自獨立的作用域，最大限度的減少各種衝突）；

    下一步就是取得iframe子頁面中的window對象，以後就可以透過這個子頁面的window對象，取得子頁面對應的元素並且進行操作咯：

    1

    <code class="html"><iframe src="动态替换这个属性即可"></iframe></code>

    1

    2

    3

    4

    5

    6

    7

    8

    <code class="js">// 获取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('要获取元素的选择器');</code>

    回覆
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:38:43

    index是被load的頁面

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    <code><!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

    </head>

    <body>

    <p class="demo">

      我是load页面

    </p>

    </body>

    </html></code>

    test是執行load的頁面

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    <code><!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></code>

    回覆
    0
  • 天蓬老师

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

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

    回覆
    0
  • 取消回覆