2012-10-24 22 views
24

Tôi đã tạo một trang được tải trong một Khung nội tuyến và cần gọi hàm trên trang mẹ sau khi tải xong.Cho phép một Iframe con gọi một hàm trên cửa sổ cha của nó từ một miền khác

Nó hoạt động tại địa phương trong phát triển (trên cùng tên miền) nhưng trong thế giới thực nó được lưu trữ trên một tên miền hoàn toàn khác nhau, vì vậy rõ ràng là tôi đang chạy vào vấn đề tên miền chéo, ví dụ:

không an toàn JavaScript cố truy cập khung với URL http: // [...] site1.com từ khung có URL http: // [...] site2.com/iframe. Tên miền, giao thức và cổng phải phù hợp.

Tôi kiểm soát cả hai máy chủ, vì vậy tôi có thể đặt một thứ gì đó lên một hoặc cả hai máy chủ cho biết chúng được phép nói chuyện với nhau không?

Tôi đã xem cài đặt "document.domain" trong cả trang Iframe và trang gốc.

tôi đã thử nghiệm với thiết lập các Access Control Header:

header ('Access-Control-Allow-Origin: *');

Nhưng cả hai đều không hoạt động.

Có cách nào cho phép khung nội tuyến gọi một chức năng trong cửa sổ chính trên miền hoàn toàn khác khi tôi kiểm soát cả hai máy chủ không?

+0

Bài đăng này (http://stackoverflow.com/questions/5477324/iframe-calling-parent-javascript) cung cấp một giải pháp cực kỳ đơn giản. – craned

Trả lời

70

Bạn có thể liên lạc giữa các khung hình qua message posting API.

Ví dụ, trong khung con của bạn, bạn có thể gọi:

parent.postMessage("child frame", "*"); 

Và trong khung chính, đăng ký một handler nhắn:

window.addEventListener("message", function(event) { 
    console.log("Hello from " + event.data); 
}); 
1

Trong trình duyệt hiện đại, bạn có thể sử dụng để liên lạc giữa việc hợp tác khung trên các miền khác nhau. Bạn không thể gọi trực tiếp một hàm, nhưng bạn có thể truyền dữ liệu hoặc thông điệp giữa hai hàm. Xem số description on MDN.

2

Sự cố này có thể được giải quyết dễ dàng bằng cách sử dụng một lần ghi .htaccess.

Demo:

A. Tạo một thư mục có tên là "iframeContent /" trên SERVER 1.

B. Đặt trong thư mục đó một file có tên index.php chứa:

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    parent.check(); 

</script> 

</body> 
</html> 

Đây là nội dung của iFrame. Nó sẽ gọi một hàm trong một phụ huynh.

C. Tạo một thư mục có tên là "iframeTesting_without-htaccess /" trên SERVER 2.

D. Nơi trong thư mục đó một file có tên chỉ mục.php chứa:

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    function check() { 

     alert("hello"); 

    } 

</script> 

<iframe id="sidebnrId" name="sidebnr" 
src="PATH-ON-SERVER-1/iframeContent/" frameborder="0" 
height="500px" width="600px" scrolling="no"></iframe> 

</script> 

</body> 
</html> 

này chỉ đơn giản là nội dung của cửa sổ cha mẹ. Chỉ cần lưu ý rằng nội dung iFrame nằm trên một máy chủ khác (vì trên SERVER 1).

E. Truy cập "PATH-ON-SERVER-2/iframeTesting_without-htaccess /" với trình duyệt web -> không có gì xảy ra: iframe không có quyền truy cập vào chức năng của cha mẹ.

đây là cách bạn có thể giải quyết VẤN ĐỀ

F. Tạo một thư mục có tên "iframeTesting_with-htaccess /" trên SERVER 2.

G. Đặt trong thư mục đó một file có tên index.php chứa:

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    function check() { 

     alert("hello"); 

    } 

</script> 

<iframe id="sidebnrId" name="sidebnr" 
src="content-iframe/" frameborder="0" 
height="500px" width="600px" scrolling="no"></iframe> 

</script> 

</body> 
</html> 

lần này iFrame không trỏ nữa trực tiếp đến con trên SERVER 1 nhưng đến thư mục có nội dung trung gian "content-iframe /" nằm trên cùng một máy chủ (SERVER 2).

H. Đặt trong thư mục đó một tập tin .htaccess chứa:

Options +FollowSymLinks 
RewriteEngine On 

RewriteBase/

RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P] 

Vai trò của tập tin đó là để chuyển hướng bất kỳ truy cập vào các thư mục do tưởng tượng đến nội dung trên SERVER 1.

I. Hãy thử lại, truy cập "PATH-ON-SERVER-2/iframeTesting_with-htaccess /" bằng trình duyệt web. Lần này nó sẽ hoạt động. Tôi hy vọng nó đã giúp :-)