2013-07-30 51 views
35

Tôi đang gặp khó khăn trong việc tìm cách truy cập trang được tải trong khung nội tuyến từ trang bên ngoài. Cả hai trang đều là tệp cục bộ và tôi đang sử dụng Chrome.Sử dụng khung nội tuyến có tệp cục bộ trong Chrome

Tôi có trang bên ngoài và nhiều trang bên trong. Trang bên ngoài phải luôn hiển thị tiêu đề trang cho trang bên trong (nó có ý nghĩa trong ứng dụng của tôi, có lẽ ít hơn trong ví dụ được rút gọn này). Điều này làm việc mà không có bất kỳ vấn đề trong AppJS, nhưng tôi đã được yêu cầu để làm cho ứng dụng này hoạt động trực tiếp trong trình duyệt. Tôi nhận được lỗi "Bị chặn khung có nguồn gốc" null "khi truy cập khung có gốc" null ". Giao thức, tên miền và cổng phải khớp.".

Tôi nghĩ rằng điều này là do chính sách gốc của Chrome liên quan đến tệp cục bộ, nhưng điều đó đã không giúp tôi khắc phục sự cố trực tiếp. Tôi có thể giải quyết vấn đề trong ví dụ được rút gọn này bằng cách sử dụng phương thức window.postMessage trên mỗi Ways to circumvent the same-origin policy. Tuy nhiên, vượt xa ví dụ này, tôi cũng muốn thao tác DOM của trang bên trong từ trang bên ngoài, vì điều này sẽ làm cho mã của tôi sạch hơn nhiều - vì vậy việc đăng tin nhắn sẽ không thực hiện được công việc.

Outer Trang

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport"> 
    </head> 
    <body> 
     This text is in the outer page 
     <iframe src="html/Home.html" seamless id="PageContent_Iframe"></iframe> 
     <script src="./js/LoadNewPage.js"></script> 
    </body> 
</html> 

Nội Trang

<!DOCTYPE html> 
<html> 
    <head> 
     <title id="Page_Title">Home</title> 
     <meta name="viewport"> 
    </head> 
    <body> 
     This text is in the inner page 
    </body> 
</html> 

Javascript

var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow; 
var pageTitleElement = iFrameWindow.$("#Page_Title"); 

mỗi Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?, tôi đã cố gắng tung ra Chrome với cờ

--allow-file-access-from-files 

Nhưng không có thay đổi trong kết quả.

mỗi Disable same origin policy in Chrome, tôi đã cố gắng tung ra Chrome với cờ

--disable-web-security 

Nhưng một lần nữa không có thay đổi trong kết quả.

mỗi What does document.domain = document.domain do?, tôi đã có tất cả các trang chạy lệnh

document.domain = document.domain; 

Điều này dẫn đến lỗi "bị chặn một khung với nguồn gốc 'null' truy cập vào một khung với nguồn gốc 'null'. Khung yêu cầu truy cập đặt "document.domain" thành "", nhưng khung được truy cập không phải là cả hai. Phải đặt "document.domain" thành cùng một giá trị để cho phép truy cập. "

Để giải trí, tôi có cả hai trang chạy lệnh

document.domain = "foo.com"; 

Điều này dẫn đến lỗi "Lỗi không bắt buộc: SecurityError: Ngoại lệ DOM 18".

Tôi đang lúng túng. Bất kỳ sự giúp đỡ từ những người hiểu biết nhiều hơn sẽ là tuyệt vời! Cảm ơn!

Trả lời

12

mỗi cuộc thảo luận của chúng tôi trong khối lập phương của tôi chỉ là một phút trước :)

tôi trúng vấn đề này cùng (Ajax post response from express js keeps throwing error) cố gắng để có được một bài yêu cầu AJAX để làm việc một cách chính xác.

Điều gì khiến tôi xung quanh nó không chạy tệp trực tiếp từ hệ thống tệp mà thay vào đó chạy tệp từ máy chủ cục bộ. Tôi đã sử dụng nút để chạy express.js. Bạn có thể cài đặt nhanh với lệnh sau đây: npm install -g express

Một khi điều đó được thực hiện, bạn có thể tạo một dự án nhanh với lệnh sau đây: bày tỏ -s -e expressTestApp

Bây giờ, trong thư mục đó, bạn nên xem tệp có tên app.js và thư mục có tên là công khai. Đặt các tệp html bạn muốn làm việc trong thư mục công khai. Tôi đã thay thế tệp app.js bằng mã sau:

var express = require('/usr/lib/node_modules/express'); 
var app = express(); 

app.use(function(err, req, res, next){ 
    console.error(err.stack); 
    res.send(500, 'Something broke!'); 
}); 

app.use(express.bodyParser()); 
app.use(express.static('public')); 

app.listen(5555, function() { console.log("Server is up and running"); }); 

Lưu ý, dòng yêu cầu có thể khác nhau. Bạn phải tìm thấy nơi hệ thống của bạn thực sự đặt nhanh. Bạn có thể làm điều đó với lệnh sau: sudo find/-name bày tỏ

Bây giờ, khởi động máy chủ web nhanh với lệnh sau đây: nút app.js

Tại thời điểm này, các máy chủ web là lên và chạy. Đi trước và mở một trình duyệt và điều hướng đến địa chỉ ip của bạn (hoặc nếu bạn đang ở trên cùng một máy với máy chủ của bạn, 127.0.0.1). Sử dụng địa chỉ ip: portnumber \ filename.html nơi số cổng là 5555 trong tệp app.js mà chúng tôi đã tạo.

Bây giờ trong trình duyệt đó, bạn không nên (và không khi chúng tôi thử nghiệm nó) có bất kỳ vấn đề tương tự nào nữa.

+7

Lưu ý rằng nếu bạn đã cài đặt Python, bạn có thể áp dụng cùng một phương pháp mà bạn đề xuất ở đây và [thiết lập một máy chủ Web một dòng] (http://stackoverflow.com/a/532710/710446): 'python -m SimpleHTTPServer [ cổng] ' – apsillers

+0

Chà, điều đó thực sự tốt đẹp. Đã không thấy điều đó. Tôi đã thử nghiệm nó trên cùng một mã nguồn và nó hoạt động, nhưng chậm hơn so với thể hiện. Để được lên và chạy nhanh như vậy là khá tuyệt vời và chắc chắn là một thương mại để được xem xét. – Brian

+1

Với Python 3, hãy sử dụng phương thức này thay thế: 'python -m http.server [port]' – taleinat

17

Tôi rất tiếc phải nói rằng bạn đã cố gắng trong suốt nhiều tuần để giải quyết vấn đề này (tôi cần nó cho một dự án) và kết luận của tôi là không thể.

Có rất nhiều vấn đề về truy cập cục bộ thông qua javascript với chrome và một số vấn đề có thể được giải quyết bằng cách sử dụng --allow-file-access-from-files--disable-web-security, bao gồm một số tính năng ngoại tuyến HTML5, nhưng tôi chắc chắn không có cách nào để truy cập tệp cục bộ.

Tôi khuyên bạn không nên mất thời gian cố gắng xoay vòng điều này và cố gắng đăng các thông điệp mà bạn có thể giải thích vào các trang bên trong, vì vậy bạn có thể thực hiện các sửa đổi DOM ở đó.

+0

Cậu bé, điều đó quá tệ. Cảm ơn rất nhiều vì phản hồi của bạn! – ATTD

2

tệp: // giao thức và giao thức http: // khiến mọi thứ hoạt động rất khác nhau liên quan đến iframe. Tôi đã có cùng một vấn đề bạn mô tả với một ứng dụng trên PhoneGap sử dụng giao thức tệp để truy cập tất cả các tệp cục bộ trong thư mục nội dung/www cục bộ.

Nếu có vẻ như trình duyệt hiện đại ngăn hiển thị tệp "cục bộ" bằng cách sử dụng giao thức tệp trong khung nội tuyến vì lý do bảo mật.

Chúng tôi đã kết thúc việc bán các iframe và chỉ sử dụng các div làm "chế độ xem". May mắn thay kích thước tổng thể của ứng dụng của chúng tôi không lớn đến mức chúng tôi đã quản lý để tải mọi thứ trong một trang.

+0

Tôi rất tò mò về những lý do bảo mật đó là gì. Thành thật mà nói tôi không thấy bất kỳ lý do này nên bị cấm. Nếu có một trường hợp cụ thể nó sẽ là tuyệt vời nếu Chrome có thể cung cấp một thông điệp hợp lý, như tôi mong đợi giao thức, tên miền và cổng là như nhau cho bó của các tập tin địa phương. –

+0

@JacekPrucia Tôi sẽ giải quyết: lý do là nếu ai đó cung cấp cho bạn một ứng dụng truy cập tệp cục bộ, thì nếu Chrome không chặn tệp, nó có thể tiếp tục và đọc/ghi tệp cục bộ của bạn. (Điều này là không rõ ràng nếu bạn đang làm việc trên ứng dụng của riêng bạn và chỉ muốn truy cập hệ thống tập tin của riêng bạn, nhưng nó trở nên rõ ràng hơn nếu bạn phân phối ứng dụng của bạn cho người khác.) –

+0

@martinjakubik Chắc chắn nó có thể, nhưng tôi vẫn không thấy gây hại trong đó. Giả sử trang của bạn bắt nguồn từ "C: \ Projects \ Test \ Test.html". Một trang độc hại chỉ có thể ghi các tệp cục bộ trong thư mục cụ thể đó (cùng một chính sách gốc khi được áp dụng cho các thư mục). Chắc chắn nó có thể tạo ra các tập tin độc hại - các ứng dụng mặt nạ như là trình bảo vệ màn hình vô tội, tuy nhiên bạn vẫn cần hành động của người dùng cho những thiệt hại được thực hiện. Nếu bạn chỉ cần sử dụng các ứng dụng tôi vẫn không nhìn thấy theo cách nó có thể làm hỏng hệ thống địa phương. –