iframe显示空白

Question

I am trying to use a simple iframe on my website. But it is not showing up. Please see the screenshot. This is my code:

 <iframe src="https://www.w3schools.com"></iframe> 

What am I doing wrong? Thanks

Answer 1

Your code is right, it's w3schools.com that's the problem. Opening up the developer console reveals this:

Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This means that w3schools.com will only work in a frame when the "origin" (the website your frame is on) is from w3schools.com. Otherwise, you'll just get a blank frame.

Answer 2

Pages from W3Schools are not displayed in iframe elements from different server because the W3Schools site implements an iframe blocking policy. In order to do this, it uses the X-Frame-Options . (See also how to block website from loading in iframe? .)

You can check whether a site implements this policy by inspecting its HTTP headers. For example, in Firefox, press F12 to open the inspection tools, then go to Network , select one of the objects that were sent over HTTP and look at the headers (or filter the headers for eg "x-frame"). Below is what this looks like for W3Schools:

Notice x-frame-options: SAMEORIGIN in the lower right part of the screenshot. With x-frame-options: SAMEORIGIN (or on some other sites x-frame-options: DENY ) set on the server side, you will not be able to load pages from that site inside an iframe or a frame .

For more background, see X-Frame-Options – How to Combat Clickjacking , which also explains other values that can be used in the x-frame-options header.

If you want to test with a webpage from a server that does not block loading in iframes, try for example https://wiki.archlinux.org/ .