วิธีรับเนื้อหาของ iframe ใน Javascript

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

สิ่งที่ฉันต้องการได้คือ:

test<br/>

javascript html iframe

— พระเจ้าช่วย
แหล่งที่มา

52

หมายเหตุสำคัญ: คุณไม่สามารถเข้าถึงเนื้อหาของ iFrame หากเป็นข้ามโดเมน ดูนโยบายแหล่งกำเนิดเดียวกัน

— HellaMad

154

คำถามที่แน่นอนคือวิธีการทำกับ JavaScript บริสุทธิ์ไม่ได้อยู่กับ jQuery

แต่ฉันมักจะใช้วิธีแก้ปัญหาที่สามารถพบได้ในซอร์สโค้ดของ jQuery เป็นเพียงหนึ่งบรรทัดของ JavaScript ดั้งเดิม

สำหรับฉันมันเป็นสิ่งที่ดีที่สุดและง่ายอ่านได้และแม้กระทั่งAFAIKทางที่สั้นที่สุดที่จะได้รับเนื้อหาใน iframe

ก่อนได้รับ iframe ของคุณ

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

จากนั้นใช้โซลูชันของ jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

มันทำงานได้แม้ใน Internet Explorer ซึ่งทำสิ่งนี้ระหว่างcontentWindowคุณสมบัติของiframeวัตถุ เบราว์เซอร์อื่น ๆ ส่วนใหญ่ใช้contentDocumentคุณสมบัติและนั่นคือเหตุผลที่เราพิสูจน์คุณสมบัตินี้ก่อนในเงื่อนไขนี้หรือ contentWindow.documentถ้ามันไม่ได้ตั้งค่าลอง

เลือกองค์ประกอบใน iframe

จากนั้นคุณสามารถใช้getElementById()หรือแม้กระทั่งquerySelectorAll()เลือกองค์ประกอบ DOM จากiframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

เรียกใช้ฟังก์ชันใน iframe

รับเพียงwindowองค์ประกอบจากiframeการเรียกฟังก์ชั่นทั่วโลกตัวแปรหรือห้องสมุดทั้งหมด (เช่นjQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

บันทึก

ทั้งหมดนี้เป็นไปได้หากคุณปฏิบัติตามนโยบายแหล่งกำเนิดเดียวกัน

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

2

iframe นั้นไม่ได้กำหนดไว้ที่นี่คุณควรเขียนโค้ดแบบเต็มหรือไม่ควรเขียน jQuery ด้วย

— Tarun Gupta

13

โปรดแก้ตัวให้ฉัน แต่บรรทัดของโค้ดเป็นข้อความที่ตัดตอนมาจาก jquery code และบล็อคโค้ดเป็นโค้ดตัวอย่างของฉันเอง ส่วนที่เหลือควรให้ทุกคนออกตัวเอง สิ่งเดียวที่คุณพลาดคือตัวแปร iframe และฉันไม่สามารถรู้ได้ว่า iframe ของคุณอยู่ที่ไหนหรือ ID นั้นเป็นอย่างไร

— algorhythm

5

คุณช่วยเพิ่มคำเตือนไปที่ด้านบนของคำตอบที่ไม่ได้ผลถ้า iframe มี src ระยะไกลหรือไม่? หากฉันผิดฉันยินดีถ้าคุณสามารถชี้ให้ฉันเห็นว่าฉันยังสามารถรับเนื้อหา iframe ได้อย่างไรโดยไม่ส่งคำขอ HTTP อื่น (เป็นไปไม่ได้เพราะฉันต้องใช้จาวาสคริปต์เพื่อสร้างเนื้อหา iframe และไม่ต้องการปรับใช้ สภาพแวดล้อมจาวาสคริปต์ที่สองหากหลีกเลี่ยงได้)

— Zackline

1

ฉันมีคำเตือน แต่ในตอนท้ายของคำอธิบายของฉัน คุณต้องปฏิบัติตามนโยบายแหล่งกำเนิดเดียวกัน นั่นคือทั้งหมดที่

— algorhythm

2

เพื่อให้การทำงานดังกล่าวข้างต้นฉันต้องใส่ไว้ใน document.querySelector('#id_description_iframe').onload = function() {... หวังว่าจะช่วยให้ใครบางคน

— user3442612

71

ใช้ JQuery ลองทำสิ่งนี้:

$("#id_description_iframe").contents().find("body").html()

— Michael Adedayo
แหล่งที่มา

27

ไม่ทำงานเนื่องจาก"โดเมนโปรโตคอลและพอร์ตต้องตรงกัน" : JavaScript ที่ไม่ปลอดภัยพยายามเข้าถึงเฟรมด้วย URL

— IonicăBizău

2

ดังที่กล่าวไว้มันจะทำงานได้ถ้าโดเมนตรงกัน FYI ฉันเพิ่งพบว่า $ ("# id_description_iframe #id_of_iframe_body"). html () ทำงานใน Chrome ได้ แต่ไม่ได้อยู่ใน Firefox ทุกรุ่นดังนั้นการใช้ข้างต้นถือว่าใช้ได้ คือ $ ("# id_description_iframe #id_of_iframe_body"). เนื้อหา (). find ("body"). html () ทำงานได้ทั้งสองอย่าง

— hobailey

41

มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

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

3

มันแปลก แต่สำหรับฉัน.bodyไม่ทำงาน อย่างไรก็ตาม.getElementsByTagName('body')[0]ไม่

— Jenny O'Reilly

มันไม่ใช่ ".body" เพียงแค่ "ร่างกาย" ลบจุด

— Arjun

1

นี่ควรเป็นคำตอบถ้าคุณอยู่ใน vanilla javascript

— Jovanni G

23

AFAIK, Iframe ไม่สามารถใช้ได้ คุณต้องชี้แอตทริบิวต์ src ไปยังหน้าอื่น

ต่อไปนี้เป็นวิธีรับเนื้อหาโดยใช้จาวาสคริปต์แบบเก่า ใช้ได้กับทั้ง IE และ Firefox

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

— Jose Basilio
แหล่งที่มา

1

มันทำบนซาฟารี (เช่นสาขา)

— Andrei Cristian Prodan

มีปัญหาข้ามโดเมนบล็อกเฟรมที่มีจุดเริ่มต้น " someOther.com " ไม่ให้เข้าถึงเฟรมข้ามจุดกำเนิด

— lannyf

10

ใช้contentใน iframe ด้วย JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

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

5

ฉันคิดว่าการวางข้อความไว้ระหว่างแท็กนั้นสงวนไว้สำหรับเบราว์เซอร์ที่ไม่สามารถจัดการ iframe เช่น ..

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

คุณใช้แอตทริบิวต์ 'src' เพื่อตั้งค่าที่มาของ iframes html ...

หวังว่าจะช่วย:)

3

รหัสต่อไปนี้เป็นไปตามข้ามเบราว์เซอร์ มันทำงานได้ใน IE7, IE8, Fx 3, Safari และ Chrome ดังนั้นไม่จำเป็นต้องจัดการกับปัญหาข้ามเบราว์เซอร์ ไม่ได้ทดสอบใน IE6

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

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

html ด้านล่างใช้ได้กับฉันใน Chrome 7 บน Mac ฉันทดสอบโพสต์ต้นฉบับนี้ใน Chrome 6 บน Windows และทำงานได้ดี <html> <head> </head> <body> <body> <iframe id = "iframeId" name = "iframeId"> ... </iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> การทดสอบ </h1>"; } </script> </body> </html>

— nekno

1

window.frames.iframeId.documentไม่ได้กำหนดสำหรับฉัน (Ubuntu 13.04, Chrome)

— IonicăBizău

2

Chalkey ถูกต้องคุณต้องใช้แอตทริบิวต์ src เพื่อระบุหน้าที่จะอยู่ใน iframe ให้คุณทำสิ่งนี้และเอกสารใน iframe อยู่ในโดเมนเดียวกับเอกสารหลักคุณสามารถใช้สิ่งนี้:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

เห็นได้ชัดว่าคุณสามารถทำสิ่งที่มีประโยชน์กับเนื้อหาแทนการแจ้งเตือน

— เกรแฮมคลาร์ก
แหล่งที่มา

1

เพื่อรับเนื้อหาร่างกายจาก javascript ฉันได้ลองใช้รหัสต่อไปนี้:

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

โดยที่ "id_description_iframe" เป็นรหัส iframe ของคุณ รหัสนี้ใช้งานได้ดีสำหรับฉัน

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

2

โปรดใส่คำตอบของคุณเสมอในบริบทแทนที่จะเป็นแค่การวางโค้ด ดูที่นี่สำหรับรายละเอียดเพิ่มเติม

— gehbiszumeis

1

คำตอบที่ใช้รหัสเท่านั้นถือว่ามีคุณภาพต่ำ: ตรวจสอบให้แน่ใจว่าได้ให้คำอธิบายว่าโค้ดของคุณทำอะไรและแก้ปัญหาอย่างไร มันจะช่วยผู้ถามและผู้อ่านในอนาคตทั้งสองหากคุณสามารถเพิ่มข้อมูลเพิ่มเติมในโพสต์ของคุณ ดูเพิ่มเติมที่การอธิบายคำตอบแบบอิงรหัสทั้งหมด: meta.stackexchange.com/questions/114762/…

— borchvm