Как открыть другие веб-сайты внутри углового приложения

Я пытаюсь загрузить другой веб-сайт, где у меня будет список веб-сайтов. Если я нажму на ссылку веб-сайта, он должен открыть веб-сайт внутри моего углового приложения. Есть ли какая-либо опция, доступная в angular или где-либо еще, которую я могу использовать для загрузки сайта, где они ограничивают загрузку сайтов?

Я пробовал использовать функции загрузки HTML-тегов iframe, embed, object и jquery для загрузки сайта. Некоторые веб-сайты открываются, а некоторые сайты ограничивают открытие в других приложениях.

<html>
<body>
<iframe src = "https://stackoverflow.com" height = "100%" width = "100%"></iframe>
</body>
</html>

В угловом

  <div >
    <iframe id = "companyFrame" [src] = "sourceURL | safe" class = "frame"> 
    </iframe>
  </div>

  @Pipe({ name: "safe" })
  export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
  }

Например, я ожидаю загрузить домашнюю страницу StackOverflow, но получаю сообщение об ошибке типа Отказался отображать «https://stackoverflow.com/» во фрейме, потому что он установил «X-Frame-Options» на «sameorigin».. Параметры браузера по умолчанию ограничивают загрузку страницы в iframe, если владелец сайта не хочет этого разрешать. Поэтому я хочу альтернативные варианты вместо iframe

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
8
0
18 597
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Попробуйте DOM Sanitizing элемента и добавьте его с помощью div как innerHTML. Так что у вас будет div-оболочка для управления iframe.

к вашему сведению. https://angular.io/api/platform-browser/DomSanitizer

Я тоже пробовал это, создав модуль безопасного канала с очисткой bypassSecurityTrustResourceUrl, но это тоже не сработало.

Vignesh Ammasi 22.05.2019 08:28

Чтобы узнать, как создать канал с помощью дезинфицирующего средства DOM, следуйте это.

Lenzman 26.05.2021 13:01

Используйте окно.открыть(). Это довольно просто!

В вашем файле component.html-

<a (click) = "goToLink("www.example.com")">page link</a>

В вашем файле component.ts-

goToLink(url: string){
window.open(url, "_blank");
}

Вместо использования "_blank" используется "_self"

window.open откроет новую вкладку в браузере. Но я хочу добавить содержимое страницы в один из элементов html в своем приложении.

Vignesh Ammasi 22.05.2019 08:52

затем использовал <iframe src = "https://stackoverflow.com" height = "100%" width = "100%" target = "_self"></iframe>

Shubham 22.05.2019 09:02

Вы можете попробовать так.

<object data = "https://stackoverflow.com" width = "600" height = "400">
    <embed src = "https://stackoverflow.com" width = "600" height = "400"/>
</object>

теги object и embed также не дают решения

Vignesh Ammasi 22.05.2019 08:36
Ответ принят как подходящий

«X-Frame-Options» применяются владельцами/серверами, чтобы люди не могли использовать свой сайт как на других сайтах, использующих Iframe.

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

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

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

Это поможет решить проблему или хотя бы с точки зрения развития

Vignesh Ammasi 22.05.2019 08:48

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

Pranoy Sarkar 22.05.2019 08:53

в основном заголовки для веб-сайта устанавливаются на веб-сервере, если заголовки «X-Frame-Options» в файлах установлены как одинаковые, вы не можете загрузить сайт из любого другого источника.

«X-Frame-Options» — это заголовок, который в основном не позволяет никому загружать ваш веб-сайт внутри другого веб-сайта.

единственное, что вы можете сделать, это открыть сайт в новой вкладке/окне, или вы можете просто перенаправить в том же приложении.

Другие вопросы по теме