Iframe onload error

This is a very late answer, but I will leave it to someone who needs it.

Task: load iframe cross-origin content, emit onLoaded on success and onError on load error.

This is the most cross browsers origin independent solution I could develop. But first of all I will briefly tell about other approaches I had and why they are bad.

1. iframe That was a little shock for me, that iframe only has onload event and it is called on load and on error, no way to know it is error or not.

2. performance.getEntriesByType(‘resource’). This method returns loaded resources. Sounds like what we need. But what a shame, firefox always adds Resource in resources array no matter it is loaded or failed. No way to know by Resource instance was it success. As usual. By the way, this method does not work in ios<11.

3. script I tried to load html using <script> tag. Emits onload and onerror correctly, sadly, only in Chrome.

And when I was ready to give up, my elder collegue told me about html4 tag <object>. It is like <iframe> tag except it has fallbacks when content is not loaded. That sounds like what we are need! Sadly it is not as easy as it sounds.

CODE SECTION

var obj = document.createElement('object');

// we need to specify a callback (i will mention why later)
obj.innerHTML = '<div style="height:5px"><div/>'; // fallback

obj.style.display = 'block'; // so height=5px will work
obj.style.visibility = 'hidden'; // to hide before loaded

obj.data = src;

After this we can set some attributes to <object> like we’d wanted to do with iframe. The only difference, we should use <params>, not attributes, but their names and values are identical.

for (var prop in params) {
    if (params.hasOwnProperty(prop)) {
        var param = document.createElement('param');
        param.name = prop;
        param.value = params[prop];

        obj.appendChild(param);
    }
}

Now, the hard part. Like many same-like elements, <object> doesn’t have specs for callbacks, so each browser behaves differently.

• Chrome. On error and on load emits load event.
• Firefox. Emits load and error correctly.
• Safari. Emits nothing….

Seems like no different from iframe, getEntriesByType, script….
But, we have native browser fallback! So, because we set fallback (innerHtml) directly, we can tell if <object> is loaded or not

function isReallyLoaded(obj) {
    return obj.offsetHeight !== 5; // fallback height
}

/**
 * Chrome calls always, Firefox on load
 */
obj.onload = function() {
    isReallyLoaded(obj) ? onLoaded() : onError();
};

/**
 * Firefox on error
 */
obj.onerror = function() {
    onError();
};

But what to do with Safari? Good old setTimeout.

var interval = function() {
    if (isLoaded) { // some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            onLoaded();
        } else {
            onError();
        }
    }

    setTimeout(interval, 100);
};

function hasResult(obj) {
    return obj.offsetHeight > 0;
}

Yeah…. not so fast. The thing is, <object> when fails has unmentioned in specs behaviour:

1. Trying to load (size=0)
2. Fails (size = any) really
3. Fallback (size = as in innnerHtml)

So, code needs a little enhancement

var interval = function() {
    if (isLoaded) { // some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            interval.count++;
            // needs less then 400ms to fallback
            interval.count > 4 && onLoadedResult(obj, onLoaded);
        } else {
            onErrorResult(obj, onError);
        }
    }

    setTimeout(interval, 100);
};
interval.count = 0;

setTimeout(interval, 100);

Well, and to start loading

document.body.appendChild(obj);

That is all. I tried to explain code in every detail, so it may look not so foolish.

P.S. WebDev sucks

This is a very late answer, but I will leave it to someone who needs it.

Task: load iframe cross-origin content, emit onLoaded on success and onError on load error.

This is the most cross browsers origin independent solution I could develop. But first of all I will briefly tell about other approaches I had and why they are bad.

1. iframe That was a little shock for me, that iframe only has onload event and it is called on load and on error, no way to know it is error or not.

2. performance.getEntriesByType(‘resource’). This method returns loaded resources. Sounds like what we need. But what a shame, firefox always adds Resource in resources array no matter it is loaded or failed. No way to know by Resource instance was it success. As usual. By the way, this method does not work in ios<11.

3. script I tried to load html using <script> tag. Emits onload and onerror correctly, sadly, only in Chrome.

And when I was ready to give up, my elder collegue told me about html4 tag <object>. It is like <iframe> tag except it has fallbacks when content is not loaded. That sounds like what we are need! Sadly it is not as easy as it sounds.

CODE SECTION

var obj = document.createElement('object');

// we need to specify a callback (i will mention why later)
obj.innerHTML = '<div style="height:5px"><div/>'; // fallback

obj.style.display = 'block'; // so height=5px will work
obj.style.visibility = 'hidden'; // to hide before loaded

obj.data = src;

After this we can set some attributes to <object> like we’d wanted to do with iframe. The only difference, we should use <params>, not attributes, but their names and values are identical.

for (var prop in params) {
    if (params.hasOwnProperty(prop)) {
        var param = document.createElement('param');
        param.name = prop;
        param.value = params[prop];

        obj.appendChild(param);
    }
}

Now, the hard part. Like many same-like elements, <object> doesn’t have specs for callbacks, so each browser behaves differently.

• Chrome. On error and on load emits load event.
• Firefox. Emits load and error correctly.
• Safari. Emits nothing….

Seems like no different from iframe, getEntriesByType, script….
But, we have native browser fallback! So, because we set fallback (innerHtml) directly, we can tell if <object> is loaded or not

function isReallyLoaded(obj) {
    return obj.offsetHeight !== 5; // fallback height
}

/**
 * Chrome calls always, Firefox on load
 */
obj.onload = function() {
    isReallyLoaded(obj) ? onLoaded() : onError();
};

/**
 * Firefox on error
 */
obj.onerror = function() {
    onError();
};

But what to do with Safari? Good old setTimeout.

var interval = function() {
    if (isLoaded) { // some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            onLoaded();
        } else {
            onError();
        }
    }

    setTimeout(interval, 100);
};

function hasResult(obj) {
    return obj.offsetHeight > 0;
}

Yeah…. not so fast. The thing is, <object> when fails has unmentioned in specs behaviour:

1. Trying to load (size=0)
2. Fails (size = any) really
3. Fallback (size = as in innnerHtml)

So, code needs a little enhancement

var interval = function() {
    if (isLoaded) { // some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            interval.count++;
            // needs less then 400ms to fallback
            interval.count > 4 && onLoadedResult(obj, onLoaded);
        } else {
            onErrorResult(obj, onError);
        }
    }

    setTimeout(interval, 100);
};
interval.count = 0;

setTimeout(interval, 100);

Well, and to start loading

document.body.appendChild(obj);

That is all. I tried to explain code in every detail, so it may look not so foolish.

P.S. WebDev sucks

Время прочтения
11 мин

Просмотры 149K

Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.

Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.

Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.

Мы рассмотрим большинство функций, которые предоставляет элемент iframe, и поговорим о том, как их использовать, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как вы можете защитить свой iframe, чтобы избежать потенциальных уязвимостей.

Что такое iframe и зачем мы его используем?

Разработчики в основном используют тег iframe для встраивания другого HTML-документа в текущий.

Скорее всего, вы пересекались с ним, когда вам нужно было добавить сторонний виджет (например, знаменитую кнопку «Нравится» на Facebook), видео с YouTube, или рекламный раздел на вашем веб-сайте.

Например, приведенный ниже код будет отображать квадрат размером 500px с главной страницей Google:

<iframe src="https://www.google.com/" height="500px" width="500px"></iframe>

Вот еще один пример, в котором мы показываем кнопку, чтобы твитнуть вашу веб-страницу в Twitter:

<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

Когда вы думаете о iframe, вы должны иметь в виду, что он позволяет вам встраивать независимый HTML-документ с его контекстом просмотра.Таким образом, он будет изолирован от JavaScript и CSS родительского элемента. Это одна из веских причин использования iframe — обеспечить определенную степень разделения между вашим приложением и содержимым iframe.

Тем не менее, как вы увидите дальше в этом руководстве, разделение не так что б идеально.Iframe все еще может вести себя раздражающим или злонамеренным образом.
Как пример — вызывать всплывающее окно или автоматически воспроизводить видео.

(*Привет онлайн-казино, и сайтам любителей клубники )

Чтобы проиллюстрировать, насколько удобна эта изоляция от JavaScript и CSS, давайте взглянем на эти две ситуации:

1)В приложении пользователь может создавать электронные письма и сохранять их в качестве шаблонов. На определенной странице мне нужно было перечислить их, чтобы он мог просмотреть и выбрать одно из них. Но чтобы не допустить влияния CSS-кода текущего сайта на стиль этих шаблонов, я поняла, что необходимо использование iframe с атрибутом srcdoc . Это представилось самым чистым решением.

<iframe srcdoc="<html><body>The content you see here will never be affected by the CSS of its parent container. It supposed to be rendered in black on a white background.</body></html>"></iframe> 

2)Другая ситуация, когда iframe спасли мне жизнь, возникла, когда пришлось создавать WYSIWYG-редактор для клиента. Проблема была связана с тем, что при помощи этих редакторов вы должны найти способ сохранить возможность производить фокус и выделение, когда пользователь нажимает на любые кнопки в интерфейсе.

Поскольку iframe предлагает изолированную среду, это означает, что фокус или выделение никогда не теряются, когда вы щелкаете за его пределами. Используя события связи между iframe и родителем (подробнее об этом позже в этой статье), мне удалось в одно мгновение создать мощный редактор.

Атрибуты, которые стоило бы знать работая с iframe

На сегодняшний день существует восемь атрибутов, которые мы можем использовать для настройки поведения или стилизации iframe.

<iframe

  src="https://google.com/"    <!-- Устанавливает адрес документа для встраивания --> 

  srcdoc="<p>Some html</p>"    <!-- Устанавливает HTML-содержимое страницы для отображения --> 

  height="100px"               <!-- Устанавливает высоту iframe в пикселях -->

  width="100px"                <!-- Устанавливает ширину iframe в пикселях -->

  name="my-iframe"          <!-- Устанавливает имя iframe (в основном используется для ссылки на элемент в JavaScript -->

  allow="fullscreen"           <!-- Устанавливает политику объектов для iframe.-->

  referrerpolicy="no-referrer" <!-- Настройте реферер для отправки при получении содержимого iframe -->

  sandbox="allow-same-origin"  <!-- Устанавливает ограничения iframe (подробнее об этом ниже) -->
></iframe>

Вы можете найти больше, чем перечисленные выше, но имейте в виду, что они больше не поддерживаются в HTML5: align, frameborder, longdesc, marginheight, marginwidth и scrolling…

*Примечание. По умолчанию элемент iframe имеет рамку вокруг него. Чтобы удалить его, вы можете использовать атрибут style, чтобы установить свойство CSS border в none.

<iframe src="https://logrocket.com/" style="border: none;"></iframe>

iframe события и общение

Загрузка и ошибки

Поскольку iframe является документом, вы можете использовать большинство глобальных обработчиков событий. Когда вы запускаете iframe, есть пара событий, которые могут пригодятся для улучшения работы. Например, отображение счетчика или отдельное сообщение, чтобы помочь пользователю:

load event — cобытие загрузки. Оно запускается, когда iframe полностью загружен. Другими словами, все статические ресурсы были загружены, и все элементы в дереве DOM вызвали событие load.

Событие ошибки — error event которое вызывается при сбое загрузки.

Вы можете прослушивать их с помощью атрибутов onload и onerror соответственно:

<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>

Если хотите, то вы можете добавить слушателей в свой iframe программно.

// Для нового iframe
const iframe = document.createElement("iframe");

iframe.onload = function() {
  console.log("iframe загрузился");
};
iframe.onerror = function() {
  console.log("Что-то пошло не так, давай, ищи ошибку!");
};

iframe.src = "https://logrocket.com/";
document.body.appendChild(iframe);

// Для существующего iframe
const iframe = document.querySelector('.my-iframe');

iframe.onload = function() {
  console.log("iframe загрузился");
}
iframe.onerror = function() {
  console.log("Что-то пошло не так, давай, ищи ошибку!");
}

Общение с фреймами

Довольно легко отправлять сообщения между родителем и iframe. Вы должны использовать функцию postMessage, которая описана в MDN здесь.

От родителя к фрейму

Отправьте сообщение от родительского элемента:

const myiframe = document.getElementById('myIframe');

myIframe.contentWindow.postMessage('message', '*');

И послушайте его в iframe:

window.onmessage = function(event){
    if (event.data == 'message') {
        console('Message received!');
    }
};

От iframe к родителю

Отправьте сообщение из iframe:

window.top.postMessage('reply', '*')

И прослушай это у родителя:

window.onmessage = function(event){
    if (event.data == 'reply') {
        console('Reply received!');
    }
};

Примечание: имейте в виду, что вы можете оказаться в некоторых хитрых ситуациях, когда вам нужно что-то отладить, так как сообщения запускаются и забываются (fire-and-forget) (иначе говоря. — нет реальной обработки ошибок).

Безопасность

Когда вы используете iframe, вы в основном имеете дело с контентом, полученным от третьей стороны, который вы не можете контролировать.

Таким образом, вы повышаете риск потенциальной уязвимости в вашем приложении или просто сталкиваетесь с плохим пользовательским интерфейсом (например, раздражающим автоматическим воспроизведением видео).

К счастью, вы можете занести в черный список или белый список конкретные функции.

Вы должны использовать sandbox (песочницу) и allow(допустимые) атрибуты.

! Помните, хорошее эмпирическое правило — всегда предоставлять минимальный уровень возможностей, необходимый ресурсу для его работы. Эксперты по безопасности называют эту концепцию «принципом наименьших привилегий».

Атрибут sandbox

Вот полный список флагов песочницы и их назначение:

Вы несете ответственность, какие привилегии вы можете предоставить каждому iframe.

Например, если вашему iframe нужно только отправить формы и открыть новые модальные окна, вот как вы настроите атрибут песочницы:

<iframe sandbox="allow-forms allow-modals" src="https://www.something.com/"></iframe>

В случае, когда атрибут песочницы настроен, а одна функция не работает правильно в ресурсе, это может быть связано с отсутствием определенного флага.
Убедитесь, что вы знаете о них больше, чтобы отладить вещи быстро.
Кроме того, имейте в виду, что использование пустого атрибута «песочница» полностью создаст «песочницу» для iframe.

Это означает, что JavaScript внутри iframe не будет выполняться, а все перечисленные выше привилегии будут ограничены (*например, создание новых окон или загрузка плагина).

Пустой атрибут песочницы в основном используется для статического содержимого, но это значительно снизит возможности, необходимые для правильной работы других ресурсов.

<iframe sandbox="allow-forms allow-modals" src="https://www.something.com/"></iframe>

Примечание. Атрибут песочницы не поддерживается в Internet Explorer 9 и более ранних версиях.

Атрибут allow

Этот атрибут allow в настоящее время является экспериментальным и поддерживается только браузерами на основе Chromium. Это позволяет вам разрешить определенные функции белого списка, такие как доступ iframe к акселерометру, информации об аккумуляторе или камере.

Доступно более 25 флагов, поэтому я не буду перечислять их все здесь. Вы можете просмотреть их в документации по политике в отношении функциональных возможностей Mozilla.

Я суммировала самые популярные в таблице ниже:

Что нужно знать о фреймах

Как решать проблемы с браузерами, которые не поддерживают фреймы

Если браузер не поддерживает iframe, он будет отображать содержимое, включенное между открывающим тегом <iframe> и закрывающим тегом </ iframe>.

Таким образом, вы всегда должны думать о том, чтобы разместить предупреждающее сообщение как запасной вариант для этих пользователей.

<iframe>
  <p>Твой браузер устарел для отображения элемента iframe</p>
</iframe>

Как вы можете сделать так, чтобы iframe был частью родительского документа (т.е. без границ и полос прокрутки)?

Для этой цели был введен бесшовный атрибут seamless. Он все еще экспериментален и плохо поддерживается в браузерах (это понимают только Chromium).

*Примечание Он также не является частью спецификации W3C HTML5 на момент написания этой статьи. Ознакомиться тут

<iframe seamless src="https://logrocket.com/"></iframe>

Могут ли iframes повлиять на SEO моего сайта?

Я мало что знала об этом, поэтому мне пришлось немного покопаться. Есть много спекуляций вокруг этой темы.

Долгое время краулеры не могли понять содержимое iframes, но это уже не так. Наиболее релевантный ответ, который я нашла, был из этой статьи, и сегодняшний вывод выглядит так:

“Поскольку поисковые системы считают, что содержимое в фреймах принадлежит другому веб-сайту, лучшее, на что вы можете надеяться, — это отсутствие эффекта. Iframes, как правило, не помогают и не повреждают ваш рейтинг в поисковых системах. “

Таким образом, лучше всего предположить, что контент, отображаемый с помощью iframes, может быть не проиндексирован или недоступен для отображения в результатах поиска Google. Обходным путем может быть предоставление дополнительных текстовых ссылок на контент, который они отображают, чтобы робот Googlebot мог сканировать и индексировать этот контент.

Примечание. Вам также не следует беспокоиться о проблемах с дублированием контента, поскольку сканеры сегодня обычно их распознают.

Могут ли фреймы повлиять на скорость загрузки моего сайта?

Каждый iframe на странице увеличивает объем используемой памяти, а также другие вычислительные ресурсы, такие как пропускная способность.Поэтому не следует чрезмерно использовать iframe, не следя за тем, что происходит, иначе вы можете повредить производительности своей страницы.

Чтобы избежать того, что ваши фреймы замедляют работу ваших страниц, хорошим способом является их ленивая загрузка (т.е. загрузка их только тогда, когда они необходимы, например, когда пользователь прокручивает рядом с ними).Этого легко добиться, просто добавив в тег атрибут loading = «lazy».

Имейте в виду, что все современные браузеры на основе Chromium поддерживают это на момент написания этой статьи. Вас заинтересует библиотека lazyload, которая работает везде.

<iframe src = "https://logrocket.com/" loading = "lazy"> </ iframe>

Примечание. Атрибут loading = «lazy» также работает с тегом img, если вы еще этого не знали.

Как я могу сделать iframe отзывчивым?

По мере того, как все больше людей просматривают Интернет с помощью своих телефонов, важно убедиться, что каждый из ваших интерфейсов отзывчивый.Но как это сделать, если на вашей странице есть фрейм?

Мы могли бы посвятить целое руководство относительно множества способов сделать ваш iframe отзывчивым. Вместо этого я просто сошлюсь на две отличные статьи:

• Эта первая статья (возможно, с самым простым решением) покажет вам, как этого добиться, обернув свой iframe в другой элемент HTML и добавив в него несколько свойств CSS.
• Эта вторая статья покажет вам, как сделать iframe отзывчивым, имея дело с соотношениями сторон.
• Существует также библиотека Iframe Resizer, но имейте в виду, что она поставляется с множеством дополнительных функций, которые вам могут и не понадобиться, и просто раздуют ваш код.

Примечание. Если вы используете библиотеку начальной загрузки в своем проекте, есть embed-responsive и встроенные embed-responsive-16by9, которые вы можете использовать прямо из коробки, чтобы адаптировать свои фреймы.

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="https://logrocket.com/" loading="lazy"></iframe>
</div>

Как предотвратить появление белой вспышки во время загрузки iframe

Да, друзья мои, для этого есть решение. В этой статье Крис Койер делится небольшим фрагментом, который скрывает все iframes на странице с помощью некоторого CSS-кода и удаляет его до тех пор, пока окно не будет загружено, а затем сделает их видимыми.

Как перезагрузить содержимое iframe

Легче лёгкого! Поскольку вы можете получить доступ к элементу окна iframe с помощью contentWindow, вы должны сделать это:

// Get the iframe
const iframe = document.getElementById('myIframe');  
// Reload the iframe
iframe.contentWindow.location.reload();

Я надеюсь, что это руководство помогло вам улучшить ваши знания о фреймах.
Хотя они могут быть небезопасными, если вы загружаете ненадежный контент, они также предлагают некоторые существенные преимущества. Поэтому вам не следует полностью исключать их из своего развивающегося арсенала, а использовать их только в соответствующих ситуациях.

Если у вас есть что добавить в эту статью, вы можете связаться со мной в комментариях ниже или просто пинговать меня в Twitter @RifkiNada

Сделаем web лучше.

Resource loading: onload and onerror

The browser allows us to track the loading of external resources – scripts, iframes, pictures and so on.

There are two events for it:

• onload – successful load,
• onerror – an error occurred.

Loading a script

Let’s say we need to load a third-party script and call a function that resides there.

We can load it dynamically, like this:

…But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.

For our own scripts we could use JavaScript modules here, but they are not widely adopted by third-party libraries.

script.onload

The main helper is the load event. It triggers after the script was loaded and executed.

So in onload we can use script variables, run functions etc.

…And what if the loading failed? For instance, there’s no such script (error 404) or the server is down (unavailable).

script.onerror

Errors that occur during the loading of the script can be tracked in an error event.

For instance, let’s request a script that doesn’t exist:

Please note that we can’t get HTTP error details here. We don’t know if it was an error 404 or 500 or something else. Just that the loading failed.

Events onload / onerror track only the loading itself.

Errors that may occur during script processing and execution are out of scope for these events. That is: if a script loaded successfully, then onload triggers, even if it has programming errors in it. To track script errors, one can use window.onerror global handler.

Other resources

The load and error events also work for other resources, basically for any resource that has an external src .

There are some notes though:

• Most resources start loading when they are added to the document. But is an exception. It starts loading when it gets a src (*) .
• For , the iframe.onload event triggers when the iframe loading finished, both for successful load and in case of an error.

That’s for historical reasons.

Crossorigin policy

There’s a rule: scripts from one site can’t access contents of the other site. So, e.g. a script at https://facebook.com can’t read the user’s mailbox at https://gmail.com .

Or, to be more precise, one origin (domain/port/protocol triplet) can’t access the content from another one. So even if we have a subdomain, or just another port, these are different origins with no access to each other.

This rule also affects resources from other domains.

If we’re using a script from another domain, and there’s an error in it, we can’t get error details.

For example, let’s take a script error.js that consists of a single (bad) function call:

Now load it from the same site where it’s located:

Источник

Загрузка ресурсов: onload и onerror

Браузер позволяет отслеживать загрузку сторонних ресурсов: скриптов, ифреймов, изображений и др.

Для этого существуют два события:

• load – успешная загрузка,
• error – во время загрузки произошла ошибка.

Загрузка скриптов

Допустим, нам нужно загрузить сторонний скрипт и вызвать функцию, которая объявлена в этом скрипте.

Мы можем загрузить этот скрипт динамически:

…Но как нам вызвать функцию, которая объявлена внутри того скрипта? Нам нужно подождать, пока скрипт загрузится, и только потом мы можем её вызвать.

Для наших собственных скриптов мы можем использовать JavaScript-модули, но они не слишком широко распространены в сторонних библиотеках.

script.onload

Главный помощник – это событие load . Оно срабатывает после того, как скрипт был загружен и выполнен.

Таким образом, в обработчике onload мы можем использовать переменные, вызывать функции и т.д., которые предоставляет нам сторонний скрипт.

…А что если во время загрузки произошла ошибка? Например, такого скрипта нет (ошибка 404), или сервер был недоступен.

script.onerror

Ошибки, которые возникают во время загрузки скрипта, могут быть отслежены с помощью события error .

Например, давайте запросим скрипт, которого не существует:

Обратите внимание, что мы не можем получить описание HTTP-ошибки. Мы не знаем, была ли это ошибка 404 или 500, или какая-то другая. Знаем только, что во время загрузки произошла ошибка.

Обработчики onload / onerror отслеживают только сам процесс загрузки.

Ошибки обработки и выполнения загруженного скрипта ими не отслеживаются. Чтобы «поймать» ошибки в скрипте, нужно воспользоваться глобальным обработчиком window.onerror .

Другие ресурсы

События load и error также срабатывают и для других ресурсов, а вообще, для любых ресурсов, у которых есть внешний src .

Однако есть некоторые особенности:

• Большинство ресурсов начинают загружаться после их добавления в документ. За исключением тега . Изображения начинают загружаться, когда получают src (*) .
• Для событие load срабатывает по окончании загрузки как в случае успеха, так и в случае ошибки.

Такое поведение сложилось по историческим причинам.

Ошибка в скрипте с другого источника

Есть правило: скрипты с одного сайта не могут получить доступ к содержимому другого сайта. Например, скрипт с https://facebook.com не может прочитать почту пользователя на https://gmail.com .

Или, если быть более точным, один источник (домен/порт/протокол) не может получить доступ к содержимому с другого источника. Даже поддомен или просто другой порт будут считаться разными источниками, не имеющими доступа друг к другу.

Это правило также касается ресурсов с других доменов.

Если мы используем скрипт с другого домена, и в нем имеется ошибка, мы не сможем узнать детали этой ошибки.

Для примера давайте возьмём мини-скрипт error.js , который состоит из одного-единственного вызова функции, которой не существует:

Теперь загрузим этот скрипт с того же сайта, на котором он лежит:

Источник

Поймать ошибку, если iframe src не загружается. Ошибка: — » отказано в отображении «http://www.google.co.in-в рамке..»

я использую Knockout.js для привязки тег iframe src tag (это будет настраиваться по отношению к пользователю).

теперь, если пользователь настроил http://www.google.com (я знаю, что он не будет загружаться в iframe, поэтому я использую его для сценария-ve), и это должно быть показано в IFrame. но он бросает ошибку:-

отказался показывать’http://www.google.co.in/ ‘ в рамке, потому что это установите ‘X-Frame-Options’ в ‘SAMEORIGIN’.

у меня есть следующий код для iframe:-

то, что я хочу, если url-адрес не загружается. Я хочу показать Таможни. СКРИПКА ЗДЕСЬ

теперь, если я использую onload и onerror как: —

он работает отлично загрузка w3schools.com но не с google.com.

Secondly: — если я сделаю это как функцию и попробую, как я сделал в моей скрипке, это не работает.

Я не знаю, как я должен заставить его работать и захватить ошибку.

отредактировано: — я видел хотите вызвать функцию, если iframe не загружается или load’s вопрос в stackoverflow, но он показывает ошибку для сайтов, которые могут быть загружены в iframe.

6 ответов

вы не сможете сделать этого со стороны клиента из-за Та Же Политика Происхождения установленных браузерах. Вы не сможете получить много информации из кадра, помимо основных свойств, таких как ширина и высота.

кроме того, google устанавливает в своем заголовке ответа»X-Frame-Options ‘ of SAMEORIGIN.

даже если вы сделали вызов ajax в google, вы не сможете проверить ответ, потому что браузер применяет тот же источник Политика.

Итак, единственный вариант-сделать запрос с вашего сервера, чтобы увидеть, можете ли вы отобразить сайт в своем IFrame.

Так, на вашем сервере.. ваше веб-приложение сделает запрос на www.google.com а затем проверьте ответ, чтобы увидеть, имеет ли он аргумент заголовка X-Frame-Options. Если он существует, то вы знаете, что IFrame будет ошибкой.

Я думаю, что вы можете связать load событие iframe, событие срабатывает при полной загрузке содержимого iframe.

в то же время вы можете запустить setTimeout, если iframe загружен очистить тайм-аут альтернативно пусть тайм-аут огонь.

вторая проблема

это потому, что вы пропустите parens в inline вызов функции; попробуйте изменить это:

onload всегда будет триггером, я slove эта проблема использует блок try catch.Он выдаст исключение при попытке получить contentDocument.

я столкнулся с аналогичной проблемой. Я решил это без использования обработчика onload.Я работал над проектом AngularJs, поэтому использовал $interval и $ timeout. U также можно использовать setTimeout и setInterval.Вот код:

каждые 0,4 секунды продолжайте проверять голову документа iFrame. Я что-то присутствую.Загрузка не была остановлена CORS, так как ошибка CORS показывает пустую страницу. Если после 5 секунд ничего нет, произошла ошибка (политика Cors) и т. д.. Шоу подходит сообщение.Спасибо. Надеюсь, это решит твою проблему.

Это небольшая модификация ответа Edens — который для меня в chrome не поймал ошибку. Хотя вы все равно получите ошибку в консоли: «Отказался показывать»https://www.google.ca/ ‘в кадре, потому что он установил» X-Frame-Options » в «sameorigin».»По крайней мере, это поймает сообщение об ошибке, и тогда вы сможете справиться с ним.

У меня такая же проблема, chrome не может запустить onerror при ошибке загрузки iframe src.

но в моем случае, Мне просто нужно сделать междоменный http-запрос, поэтому я использую скрипт src/onload / onerror вместо iframe. он хорошо работает.

Источник

Ошибка перехвата, если iframe src не загружается. Ошибка: — «Не удалось отобразить» http://www.google.co.in/ «во фрейме ..»

Я использую Knockout.js для привязки src тега iframe (это можно настроить в соответствии с пользователем).

Теперь, если пользователь настроил http://www.google.com (я знаю, что он не будет загружаться в iframe, поэтому я использую его для сценария -ve), и это должно быть показано в IFrame. но это вызывает ошибку: —

Отказался отображать » http://www.google.co.in/ » во фрейме, потому что для параметра «X-Frame-Options» установлено значение «SAMEORIGIN».

У меня есть следующий код для Iframe: —

Я хочу, чтобы URL-адрес не загружался. Я хочу отображать настраиваемое сообщение . FIDDLE ЗДЕСЬ

Теперь, если я использую onload и onerror как: —

Он отлично работает при загрузке w3schools.com, но не с google.com.

Во-вторых: — если я сделаю это как функцию и попробую, как я сделал на своей скрипке, это не сработает.

Я не знаю, как мне запустить его и зафиксировать ошибку.

Отредактировано: — Я видел, что хочу вызвать функцию, если iframe не загружает или не загружает вопрос в stackoverflow, но показывает ошибку для сайтов, которые могут быть загружены в iframe.

Вы не сможете сделать это на стороне клиента из-за той же политики происхождения, установленной браузерами. Вы не сможете получить из iFrame много информации, кроме основных свойств, таких как ширина и высота.

Кроме того, Google устанавливает в своем заголовке ответа « X-Frame-Options » SAMEORIGIN.

Даже если вы выполнили ajax-вызов в Google, вы не сможете проверить ответ, потому что браузер применяет ту же политику происхождения.

Итак, единственный вариант — сделать запрос с вашего сервера, чтобы узнать, можете ли вы отобразить сайт в своем IFrame.

Итак, на вашем сервере . ваше веб-приложение отправит запрос на www.google.com, а затем проверит ответ, чтобы увидеть, есть ли у него аргумент заголовка X-Frame-Options. Если он существует, вы знаете, что IFrame выдаст ошибку.

Я думаю, что вы можете привязать load событие iframe, событие срабатывает, когда содержимое iframe полностью загружено.

В то же время вы можете запустить setTimeout, если iFrame загружен, сбросьте тайм-аут или позвольте тайм-ауту сработать.

Вторая проблема

Это потому, что вы пропустили скобки в вызове встроенной функции; попробуйте изменить это:

Источник

Как отловить ошибки JavaScript во всех фреймах (с помощью window.error)?

Я знаю, что можно добавить прослушиватель событий для window.error.

Однако при работе с iframe каждый iframe имеет свой собственный оконный элемент, и window.error должны быть созданы для каждого и каждого iframe .

Можно ли каким-то образом определить обработчик событий ошибки в одном месте, где все ошибки будут запускать этот конкретный метод?

2 ответы

Это может сработать.

ответ дан 30 авг.

Спасибо за это. выглядит красиво, хотя кажется не идеальным для моего приложения — IFrames и окна создаются на лету, и я не могу контролировать большую часть из них, поэтому я не могу заранее знать все выигрышные объекты. Я предполагаю, что в окне IE нет глобального способа обработки ошибок? Спасибо, Таль. — Долина

ах, в таком случае . в каждый создаваемый вами фрейм просто добавляйте . window.onerror = top.myHandler; — Scunliffe

да . но я заранее не знаю, что будет источником iframe. (используя отправку формы в целевой IFrame) — ошибка window.onerror должна быть внутри самого кода IFrame .. — Долина

Хм, у вас есть глобальный JS-файл, который вы включаете во все фреймы? если да, то может ли туда попасть ваш обработчик ошибок? и подключаться к каждому окну при загрузке файла сценария? В зависимости от того, какая информация вам нужна / нужна в обработчике ошибок, вы можете проверить родительский [n] и дочерний [n] фреймы, чтобы определить иерархию в обработчике ошибок. Из интереса . что ты делаешь с обработчиком? например, выполняете ли вы обратный вызов AJAX для регистрации ошибок / поддержки системы электронной почты? или вы просто предупреждаете пользователя «красивым» способом? — Scunliffe

Есть несколько фреймов с глобальным JS, и это хорошая идея. Некоторые iframe не имеют ничего общего и создаются динамически — какие мысли по этому поводу? Что касается обработчика ошибок — я думаю о том, чтобы сделать обратный вызов AJAX для поддержки. но в настоящее время это сохраняется только на стороне клиента в некоторой строке для последующего просмотра. — Долина

Я не пробовал этого, поэтому, пожалуйста, не вешайте меня за это 🙂 В главном / родительском окне, которое содержит все фреймы, вы можете создать там свою функцию обработки ошибок. Затем используйте jQuery, чтобы захватить все ваши iFrames на вашей странице и зарегистрируйте обработчик .error, чтобы указать на вашу функцию, зарегистрированную в родительском окне.

Источник

The browser helps to track the loading of external resources, such as pictures, scripts and more.

Two primary events are used for that purpose:

• onload: it supposes a successful load.
• onerror: it means that an error has occurred.

Imagine that you should load a third-party script and call a function residing there, as illustrated below:

let script = document.createElement('script');
script.src = "script.js";
document.head.append(script);

To run the function declared inside that script, you should wait until the script loads and only then call it.

Please note, that here you could also use JavaScript modules, but they are not widely used by third-party libraries.

Script.onload

The load event is the main helper here. It occurs once the was already loaded and executed.

Here is an example of the load event:

So, Script variables and run functions can be used in download.

But, the loading may fail. Note that there isn’t any such script (error 404) or the server is done.

Let’s see what happens in such a circumstance.

Script.onerror

Errors occurring during the script loading are tracked in an error event.

Let’s take a look at an example of requesting a non-existing script:

Please, take into account that the details of the HTTP error are not available here: you can’t know whether it’s an error 404, 500 or anything else.

Another important thing to note: the onload and onerror events track only the loading itself. In other words, errors occurring during the script processing and execution are out of the framework. So, if a script loaded efficiently, then onload happens, even if it includes some programming errors. For tracking the script errors, you can use a global handler called window.onerror.

The load and error events operate for any other resources that have an external src, like in the example below:

But, note that several resources begin loading once they are added to the document. The <img> is an exception to the rule. It begins to load after getting a src (*).

For <iframe>, the iframe.onload event occurs once the iframe loading is over. It is both for the efficient load and in case of an error.

Scripts from one site don’t have access to the scripts of the other one. For example, a script at https://www.instagram.com/ can’t read the user’s mailbox at https://gmail.com.

In other words, one origin (domain/port/protocol) can’t access the content of the other one. Even in case of having a subdomain, these are considered different origins.

The rule above affects the resources from other domains, as well.
An example of a script error.js consisting of a single (bad) function call is demonstrated below:

//  error.js
noSuchFunction();

If you try loading it from the same site where it’s located, you will have this:

<script>
  window.onerror = function(message, url, line, col, errorObj) {
    alert(`${message}n${url}, ${line}:${col}`);
  };
</script>
<script src="/article/onload-onerror/crossorigin/error.js"></script>

A good error report can be seen here:

Uncaught ReferenceError: noSuchFunction is not defined
https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1

The example of loading the same script from another domain will look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <script>
      window.onerror = function(message, url, line, col, errorObj) {
        alert(`${message}n${url}, ${line}:${col}`);
      };
    </script>
    <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
  </body>
</html>

So, there is a different report here:

Script error.
, 0:0

There can be different details, depending on the browser. However, idea remains the same: any information regarding the internals of a script is hidden. The reason is that it is from a different domain.

Still, it is important to know details about errors.

There are services, listening for global errors using window.onerror, saving errors and providing an interface to access and analyze them. So, they make it possible to see real errors, triggered by the users. But, if a script has another origin, no more information will be available.

For allowing cross-origin access, the <script> tag should have the crossorigin attribute. The remote server has to provide specific headers.

Three levels of cross-origin access exist:

1. No crossorigin attribute — the access is not allowed.
2. For crossorigin="anonymous" the access is allowed, in case the server responds with the header Access-Control-Allow-Origin including or the origin. Any authorization information or cookies are sent to the remote server.
3. crossorigin="use-credentials": the access is allowed in case the server sends back the Access-Control-Allow-Origin header with the origin and Access-Control-Allow-Credentials: true. Authorization information and cookies are sent to the remote server.

In case of not having any crossorigin attribute, the access will be prohibited.

So, let’s see how to add it.

You can choose between "anonymous" and "use-credentials".
In the event of not caring about the cookies, "anonymous" is the way to go, like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <script>
      window.onerror = function(message, url, line, col, errorObj) {
        alert(`${message}n${url}, ${line}:${col}`);
      };
    </script>
    <script crossorigin="anonymous" src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
  </body>
</html>

Supposing that the server provides Access-Control-Allow-Origin header, the full error report is ready.

Resources such as scripts, styles, images provide load and error events for tracking their loading:

• The load event happens on a successful load.
• The error event occurs on a failed load.

, there is an exception: <iframe>, which only triggers the load, for each load completion, even if the page is not found. For resources, you can also use the readystatechange event. But it is used rarely as the load and error events are simpler and handier.