จะเข้าถึงเนื้อหาของ iframe ด้วย jQuery ได้อย่างไร?

116

ฉันจะเข้าถึงเนื้อหาของ iframe ด้วย jQuery ได้อย่างไร? ฉันพยายามทำสิ่งนี้ แต่มันใช้ไม่ได้:

เนื้อหา iframe: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

ฉันจะเข้าถึงได้myContentอย่างไร?

คล้ายกับ jquery / javascript: เข้าถึงเนื้อหาของ iframeแต่คำตอบที่ยอมรับไม่ใช่สิ่งที่ฉันกำลังมองหา

jquery iframe

ฉันเพิ่งพบว่าตัวแปร $ ในตัวในคอนโซล Firefox ดูไม่เหมือน jQuery ที่สมบูรณ์เลย (ฉันพบสิ่งนี้หลังจากที่ตระหนักว่าฉันไม่มีตัวแปร jQuery ด้วยจากนั้นก็พบว่าฉันไม่ได้โหลดซอร์สโค้ดของ jQuery)

— eel ghEEz

คำตอบ:

214

คุณต้องใช้contents()วิธีการ:

$("#myiframe").contents().find("#myContent")

ที่มา: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

เอกสาร API: https://api.jquery.com/contents/

— mbillard
แหล่งที่มา

ให้ข้อผิดพลาด: ข้อผิดพลาด: ไม่อนุญาตให้เข้าถึงคุณสมบัติ 'ownerDocument'

— Imran Khan

ime: อาจทำให้คุณเกิดข้อผิดพลาดเนื่องจากสาเหตุต่อไปนี้: 1) Iframe ไม่ได้อยู่ในโดเมนเดียวกัน 2) คุณกำลังพยายามอ่านก่อนเหตุการณ์โหลด iframe

— iMatoria

มีวิธีตรวจสอบว่าเนื้อหา iframe มาจากโดเมนเดียวกันหรือไม่ก่อนที่จะพยายามเข้าถึงและได้รับข้อผิดพลาด

— Kamafeather

url ต้นทางเสีย

— karthzDIGI

@jperezmartin: คุณจะต้องใช้ไลบรารีจาวาสคริปต์ที่จะถ่ายโอนข้อมูลระหว่างหน้าหลักและ iframe โดยทั่วไปเบราว์เซอร์ถูกปฏิเสธเนื่องจากการทำงานของ Cross Browser ฉันขอโทษฉันไม่รู้จักห้องสมุดดังกล่าวเพราะฉันไม่เคยต้องการมัน

— iMatoria

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

— andres descalzo
แหล่งที่มา

หากซอร์สของ iframe เป็นโดเมนภายนอกเบราว์เซอร์จะซ่อนเนื้อหา iframe (นโยบายแหล่งกำเนิดเดียวกัน) วิธีแก้ปัญหาคือบันทึกเนื้อหาภายนอกในไฟล์ตัวอย่างเช่น (ใน PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

จากนั้นรับเนื้อหาไฟล์ใหม่ (สตริง) และแยกวิเคราะห์เป็น html ตัวอย่างเช่น (ใน jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');

— fireb86
แหล่งที่มา