Bắt lỗi nếu iframe src không tải được. Lỗi: - “Từ chối hiển thị 'http://www.google.co.in/' trong khung ..”

Tôi đang sử dụng Knockout.jsđể liên kết srcthẻ iframe (Thẻ này sẽ có thể định cấu hình đối với Người dùng).

Bây giờ, nếu người dùng đã định cấu hình http://www.google.com (tôi biết nó sẽ không tải trong iframe, đó là lý do tại sao tôi đang sử dụng nó cho kịch bản -ve) và điều đó phải được hiển thị trong IFrame. nhưng nó báo lỗi: -

Từ chối hiển thị ' http://www.google.co.in/ ' trong khung vì nó đặt 'X-Frame-Options' thành 'SAMEORIGIN'.

Tôi có mã sau cho Iframe: -

<iframe class="iframe" id="iframe" data-bind="attr: {src: externalAppUrl, height: iframeheight}">
    <p>Hi, This website does not supports IFrame</p>
</iframe>

Điều tôi muốn là, nếu URL không tải được. Tôi muốn hiển thị Thông báo tùy chỉnh . FIDDLE TẠI ĐÂY

Bây giờ, nếu tôi sử dụng onload và onerror như: -

<iframe id="browse" style="width:100%;height:100%" onload="alert('Done')" onerror="alert('Failed')"></iframe>

Nó hoạt động tốt khi tải w3schools.com nhưng không hoạt động với google.com.

Thứ hai: - nếu tôi tạo nó dưới dạng một hàm và thử như tôi đã làm trong trò chơi điện tử của mình, nó không hoạt động.

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

Tôi không biết tôi nên làm thế nào để nó chạy và bắt lỗi.

Đã chỉnh sửa: - Tôi đã thấy Muốn gọi một hàm nếu iframe không tải hoặc câu hỏi của tải trong stackoverflow nhưng nó hiển thị lỗi cho các trang web có thể được tải trong iframe.

Ngoài ra, tôi đã xem xét khung nội tuyến Stackoverflow khi tải sự kiện Cảm ơn !!

Bạn sẽ không thể thực hiện việc này từ phía máy khách do Chính sách nguồn gốc giống nhau do trình duyệt đặt. Bạn sẽ không thể nhận được nhiều thông tin từ iFrame ngoài các thuộc tính cơ bản như chiều rộng và chiều cao của nó.

Ngoài ra, google đặt trong tiêu đề phản hồi của nó là ' X-Frame-Options ' của SAMEORIGIN.

Ngay cả khi bạn thực hiện một cuộc gọi ajax tới google, bạn sẽ không thể kiểm tra phản hồi vì trình duyệt thực thi Chính sách nguồn gốc giống nhau.

Vì vậy, tùy chọn duy nhất là thực hiện yêu cầu từ máy chủ của bạn để xem liệu bạn có thể hiển thị trang web trong IFrame của mình hay không.

Vì vậy, trên máy chủ của bạn .. ứng dụng web của bạn sẽ đưa ra yêu cầu đến www.google.com và sau đó kiểm tra phản hồi để xem phản hồi có đối số tiêu đề của X-Frame-Options hay không. Nếu nó tồn tại thì bạn biết IFrame sẽ lỗi.

Tôi nghĩ rằng bạn có thể liên kết loadsự kiện của iframe, sự kiện sẽ kích hoạt khi nội dung iframe được tải đầy đủ.

Đồng thời, bạn có thể bắt đầu setTimeout, nếu iFrame được tải, hãy xóa thời gian chờ hoặc để thời gian chờ kích hoạt.

Mã:

var iframeError;

function change() {
    var url = $("#addr").val();
    $("#browse").attr("src", url);
    iframeError = setTimeout(error, 5000);
}

function load(e) {
    alert(e);
}

function error() {
    alert('error');
}

$(document).ready(function () {
    $('#browse').on('load', (function () {
        load('ok');
        clearTimeout(iframeError);
    }));

});

Demo: http://jsfiddle.net/IrvinDominin/QXc6P/

Vấn đề thứ hai

Đó là bởi vì bạn bỏ lỡ các parens trong lệnh gọi hàm nội tuyến; hãy thử thay đổi điều này:

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

vào cái này:

<iframe id="browse" style="width:100%;height:100%" onload="load('Done func');" onerror="error('failed function');"></iframe>

Demo: http://jsfiddle.net/IrvinDominin/ALBXR/4/

Onload sẽ luôn được kích hoạt, tôi giải quyết vấn đề này bằng cách sử dụng khối try catch. Nó sẽ đưa ra một ngoại lệ khi bạn cố lấy contentDocument.

iframe.onload = function(){
   var that = $(this)[0];
   try{
        that.contentDocument;
   }
   catch(err){
        //TODO 
   }
}

Đây là một sửa đổi nhỏ đối với câu trả lời của Edens - đối với tôi trong chrome không bắt được lỗi. Mặc dù bạn vẫn sẽ gặp lỗi trong bảng điều khiển: "Từ chối hiển thị ' https://www.google.ca/ ' trong một khung vì nó đặt 'X-Frame-Options' thành 'sameorigin'." Ít nhất điều này sẽ bắt được thông báo lỗi và sau đó bạn có thể xử lý nó.

 <iframe id="myframe" src="https://google.ca"></iframe>

 <script>
 myframe.onload = function(){
 var that = document.getElementById('myframe');

 try{
    (that.contentWindow||that.contentDocument).location.href;
 }
 catch(err){
    //err:SecurityError: Blocked a frame with origin "http://*********" from accessing a cross-origin frame.
    console.log('err:'+err);
}
}
</script>

Tôi phải đối mặt với vấn đề tương tự. Tôi đã giải quyết nó mà không sử dụng trình xử lý onload. Tôi đang làm việc trong dự án AngularJs nên tôi đã sử dụng $ khoảng thời gian và $ thời gian chờ. Bạn cũng có thể sử dụng setTimeout và setInterval. Đây là mã:

 var stopPolling;
 var doIframePolling;
 $scope.showIframe = true;
 doIframePolling = $interval(function () {
    if(document.getElementById('UrlIframe') && document.getElementById('UrlIframe').contentDocument.head && document.getElementById('UrlIframe').contentDocument.head.innerHTML != ''){
        $interval.cancel(doIframePolling);
        doIframePolling = undefined;
        $timeout.cancel(stopPolling);
        stopPolling = undefined;
        $scope.showIframe = true;
    }
},400);

stopPolling = $timeout(function () {
        $interval.cancel(doIframePolling);
        doIframePolling = undefined;
        $timeout.cancel(stopPolling);
        stopPolling = undefined;
        $scope.showIframe = false;     
},5000);

 $scope.$on("$destroy",function() {
        $timeout.cancel(stopPolling);
        $interval.cancel(doIframePolling);
 });

Cứ sau 0,4 giây, hãy tiếp tục kiểm tra phần đầu của Tài liệu iFrame. I somthing is present.Loading không bị CORS dừng vì lỗi CORS hiển thị trang trống. Nếu không có gì xuất hiện sau 5 giây, có một số lỗi (chính sách Cors), v.v. Hiển thị thông báo phù hợp. Cảm ơn. Tôi hy vọng nó giải quyết được vấn đề của bạn.

Tôi gặp vấn đề tương tự, chrome không thể kích hoạt lỗi khi tải iframe src.

nhưng trong trường hợp của tôi, tôi chỉ cần thực hiện một yêu cầu http tên miền chéo, vì vậy tôi sử dụng script src / onload / onerror thay vì iframe. nó hoạt động tốt.

Tôi đã giải quyết nó với window.length. Nhưng với giải pháp này, bạn có thể nhận được lỗi hiện tại (X-Frame hoặc 404).

iframe.onload = event => {
   const isLoaded = event.target.contentWindow.window.length // 0 or 1
}

MSDN

Như đã giải thích trong câu trả lời được chấp nhận, https://stackoverflow.com/a/18665488/4038790 , bạn cần kiểm tra qua máy chủ.

Vì không có cách nào đáng tin cậy để kiểm tra điều này trong trình duyệt, tôi khuyên bạn nên xây dựng cho mình một điểm cuối máy chủ nhanh mà bạn có thể sử dụng để kiểm tra xem có url nào có thể tải được qua iframe hay không. Khi máy chủ của bạn đã khởi động và đang chạy, chỉ cần gửi yêu cầu AJAX tới nó để kiểm tra bất kỳ url nào bằng cách cung cấp url trong chuỗi truy vấn dưới dạng url(hoặc bất kỳ thứ gì máy chủ của bạn mong muốn). Đây là mã máy chủ trong NodeJs:

const express = require('express')
const app = express()

app.get('/checkCanLoadIframeUrl', (req, res) => {
  const request = require('request')
  const Q = require('q')

  return Q.Promise((resolve) => {
    const url = decodeURIComponent(req.query.url)

    const deafultTimeout = setTimeout(() => {
      // Default to false if no response after 10 seconds
      resolve(false)
    }, 10000)

    request({
        url,
        jar: true /** Maintain cookies through redirects */
      })
      .on('response', (remoteRes) => {
        const opts = (remoteRes.headers['x-frame-options'] || '').toLowerCase()
        resolve(!opts || (opts !== 'deny' && opts !== 'sameorigin'))
        clearTimeout(deafultTimeout)
      })
      .on('error', function() {
        resolve(false)
        clearTimeout(deafultTimeout)
      })
  }).then((result) => {
    return res.status(200).json(!!result)
  })
})

app.listen(process.env.PORT || 3100)