วิธีการเข้าถึง Iframe หลักจาก JavaScript

ฉันมี IFrame ซึ่งเรียกหน้าโดเมนเดียวกัน ปัญหาของฉันคือฉันต้องการเข้าถึงข้อมูลบางอย่างจาก Iframe แม่จากหน้านี้เรียกว่า (จาก JavaScript) ฉันจะเข้าถึง Iframe นี้ได้อย่างไร

รายละเอียด: มี Iframes หลายอย่างเช่นนี้ที่สามารถโหลดหน้าเดียวกันได้เนื่องจากฉันกำลังเขียนโปรแกรมสภาพแวดล้อม Windows ฉันตั้งใจจะปิด Iframe นี้นั่นเป็นเหตุผลว่าทำไมฉันต้องรู้ว่าฉันควรปิดตัวเขาอย่างไร ฉันมีอาร์เรย์ที่อ้างอิงถึง Iframes เหล่านี้

แก้ไข: มี iframes ถูกสร้างขึ้นแบบไดนามิก

นอกจากนี้คุณสามารถตั้งชื่อและ ID ให้มีค่าเท่ากัน

<iframe id="frame1" name="frame1" src="any.html"></iframe>

ดังนั้นคุณจะสามารถใช้รหัสถัดไปในหน้าย่อย

parent.document.getElementById(window.name);

เพียงโทรwindow.frameElementจากหน้าเว็บที่มีเฟรมของคุณ ถ้าหน้าไม่ได้อยู่ในกรอบแล้วจะframeElementnull

วิธีอื่น (การทำให้องค์ประกอบหน้าต่างภายในเฟรมนั้นมีความสำคัญน้อยกว่า) แต่เพื่อความสมบูรณ์:

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

ฉันจะแนะนำให้ใช้postMessage API

ใน iframe ของคุณโทร:

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

ในหน้าคุณรวมถึง iframe คุณสามารถฟังเหตุการณ์เช่นนี้:

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

อย่างไรก็ตามมันเป็นไปได้ที่จะทำการโทรไปยัง windows อื่น ๆ และไม่เพียง iframe

อ่านเพิ่มเติมเกี่ยวกับ postMessage API บนบล็อก John Resigs ที่นี่

คำถามเก่า แต่ฉันเพิ่งมีปัญหาเดียวกันนี้และพบวิธีที่จะได้รับ iframe มันเป็นเรื่องของการวนซ้ำผ่านเฟรมของหน้าต่างหลักและทดสอบ contentWindow ของแต่ละเฟรมเทียบกับหน้าต่างที่โค้ดของคุณกำลังทำงานอยู่ ตัวอย่าง:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

หรือใช้ jQuery:

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

วิธีนี้จะบันทึกการกำหนด ID ให้กับแต่ละ iframe ซึ่งเป็นสิ่งที่ดีในกรณีของคุณเนื่องจากสร้างขึ้นแบบไดนามิก ฉันหาทางตรงไม่ได้เนื่องจากคุณไม่สามารถรับองค์ประกอบ iframe โดยใช้ window.parent - มันจะตรงไปที่องค์ประกอบหน้าต่างหลัก (ข้าม iframe) ดังนั้นการวนลูปเหล่านั้นจึงเป็นวิธีเดียวเว้นแต่คุณจะต้องการใช้ ID

คุณสามารถใช้parentเพื่อเข้าถึงหน้าหลัก ดังนั้นในการเข้าถึงฟังก์ชั่นมันจะเป็น:

var obj = parent.getElementById('foo');

เมื่อตั้งค่า id of iframe แล้วคุณสามารถเข้าถึง iframe จากเอกสารภายในดังที่แสดงด้านล่าง

var iframe = parent.document.getElementById(frameElement.id);

ทำงานได้ดีใน IE, Chrome และ FF

อาจจะแค่ใช้

window.parent

เข้าสู่ iframe ของคุณเพื่อรับเฟรม / หน้าต่างการโทร หากคุณมีกรอบการโทรหลายรายการคุณสามารถใช้

window.top

ลองสิ่งนี้ในเฟรมหลักของคุณตั้งค่า IFRAME ดังนี้:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

โปรดทราบว่ารหัสของแต่ละเฟรมจะถูกส่งเป็นตัวยึดใน src

จากนั้นใน html ภายในของคุณคุณสามารถเข้าถึง id ของเฟรมที่โหลดผ่านทาง location.hash:

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

จากนั้นคุณสามารถเข้าถึง parent.document.getElementById () เพื่อเข้าถึงแท็ก iframe จากภายใน iframe

// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}