Cách truy cập Iframe gốc từ JavaScript

Chà, tôi có một IFrame, gọi một trang tên miền giống nhau. Vấn đề của tôi là tôi muốn truy cập một số thông tin từ Iframe gốc này từ trang được gọi này (từ JavaScript). Làm cách nào tôi có thể truy cập Iframe này?

Chi tiết: Có một số Iframe giống như trang này, có thể tải cùng một trang, vì tôi đang lập trình môi trường Windows. Tôi dự định đóng Iframe này, đó là lý do tại sao tôi cần biết tôi nên đóng cái gì từ bên trong anh ta. Tôi có một mảng giữ các tham chiếu đến các Iframes này.

EDIT: Có iframe được tạo động

Ngoài ra, bạn có thể đặt tên và ID thành các giá trị bằng nhau

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

vì vậy bạn sẽ có thể sử dụng mã tiếp theo trong trang con

parent.document.getElementById(window.name);

Đơn giản chỉ cần gọi window.frameElementtừ trang đóng khung của bạn. Nếu trang không nằm trong một khung thì frameElementsẽ có null.

Một cách khác (lấy phần tử cửa sổ bên trong một khung ít tầm thường hơn) nhưng để hoàn thiện:

/**
 * @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;
}

Tôi sẽ khuyên bạn nên sử dụng API postMessage .

Trong iframe của bạn, hãy gọi:

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

Trong trang bạn đang bao gồm iframe bạn có thể nghe các sự kiện như thế này:

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

    }, false);

Nhân tiện, cũng có thể thực hiện các cuộc gọi đến các cửa sổ khác, và không chỉ iframe.

Đọc thêm về API postMessage trên blog John Resigs tại đây

Câu hỏi cũ, nhưng tôi chỉ gặp vấn đề tương tự và tìm cách lấy iframe. Đó chỉ đơn giản là vấn đề lặp qua các khung [] của cửa sổ cha mẹ và kiểm tra từng nội dung của khung hìnhWindow đối với cửa sổ nơi mã của bạn đang chạy. Thí dụ:

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

Hoặc, sử dụng jQuery:

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

Phương pháp này lưu việc gán ID cho từng iframe, rất tốt trong trường hợp của bạn vì chúng được tạo động. Tôi không thể tìm thấy một cách trực tiếp hơn, vì bạn không thể lấy phần tử iframe bằng window.parent - nó đi thẳng đến phần tử cửa sổ cha mẹ (bỏ qua iframe). Vì vậy, lặp qua chúng dường như là cách duy nhất, trừ khi bạn muốn sử dụng ID.

bạn có thể sử dụng parentđể truy cập trang cha. Vì vậy, để truy cập một chức năng, nó sẽ là:

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

Khi id của iframe được đặt, bạn có thể truy cập iframe từ tài liệu bên trong như được hiển thị bên dưới.

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

Hoạt động tốt trong IE, Chrome và FF.

Có lẽ chỉ cần sử dụng

window.parent

vào iframe của bạn để lấy khung / cửa sổ gọi. Nếu bạn có nhiều khung gọi, bạn có thể sử dụng

window.top

Hãy thử điều này, trong khung cha mẹ của bạn thiết lập IFRAME như thế này:

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

Lưu ý rằng id của mỗi khung được truyền dưới dạng neo trong src.

sau đó trong html bên trong của bạn, bạn có thể truy cập id của khung mà nó được tải thông qua location.hash:

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

sau đó bạn có thể truy cập Parent.document.getEuityById () để truy cập thẻ iframe từ bên trong 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;
}