Iframe with External Page Not Working

iframe with external page not working

Google uses an X-FRAME-OPTIONS HTTP header to disallow putting their pages in iframes:
https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header

Almost all modern browsers will refuse to put pages with this HTTP header in an iframe. There's nothing you can do about that.

How to embed iFrame with external website

Can you try this simple example - I've defaulted the input to https://en.wikipedia.org but you can try other URLs in there.

$(document).ready(function(){  $("#button").click(function () {       var url = $('#url').val();      $("#frame").attr("src", url);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div id="mydiv">    <input id="url" type="text" value="https://en.wikipedia.org"/>     <iframe id="frame" src="" width="100%" height="300">     </iframe> </div> <button id="button">Load</button>

iframe refuses to display

It means that the http server at cw.na1.hgncloud.com send some http headers to tell web browsers like Chrome to allow iframe loading of that page (https://cw.na1.hgncloud.com/crossmatch/) only from a page hosted on the same domain (cw.na1.hgncloud.com) :

Content-Security-Policy: frame-ancestors 'self' https://cw.na1.hgncloud.com
X-Frame-Options: ALLOW-FROM https://cw.na1.hgncloud.com

You should read that :

https://developer.mozilla.org/en-US/docs/Web/Security/CSP
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Issues with how to Embed an External Page Without an Iframe

From my JavaScript console when I try to run that code in Firefox:

Load denied by X-Frame-Options: https://www.flickr.com/ does not permit cross-origin framing.

Flickr doesn't allow you to put its homepage in a frame (and a frame created by an object element is still a frame).

iframe not loading HTML Page I want to perform onClick operation on it but instead HTML is working on its own

First of all, you must add some sort of a container over the iframe to block any interactions with the iframe. Additionally, that container must be bound to a mouse click event that would take you to the page displayed in the iframe.

Here is a working example:

// Here is an event listner to bind a click event to the container
// that covers the iframe.
// All it does is take you to the page that the iframe is displaying
document.getElementById("cover-iframe").addEventListener('click', () => {
  document.location.href = 'test.html'
})

/* Set the size of this container (width, height)
to change the size of the iframe */
.container {
  position: relative;
  width: 50rem;
}

.iframe {
  width: 100%;
}

/* This is to make the container cover the iframe */
#cover-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <!-- This container is to hold the iframe and the container that will cover the iframe  -->
  <div class="container">
    <!-- "test.html" can be changed to the page you want to display -->
    <iframe src="test.html" frameborder="1" class="iframe"></iframe>
    <span id="cover-iframe"></span>
  </div>
</body>

</html>

Iframe with External Page Not Working