简体   繁体   中英

Facebook iframe not loading on my website. How do I fix it?

I'm trying to add an iframe to the right hand side of my webpage, but for some reason the iframe won't load when I refresh the page. I tried looking at my developer tools in Google but all I saw was that there was a style property added to my iframe that says, "display: none.important", I don't know if this is what is keeping it from loading. but that is all I can think of, I looked at other suggestions. but they didn't fix the problem.

I also don't know how to get rid of the display property if it is the issue. I don't have any compiling issues. I'm creating this website with React and I'm trying to display my facebook account with an iframe on the right hand side of my webpage. I could really use some help with this. Here is my React code:

import React from 'react';
import "./Widgets.css";

function Widgets() {
  return (
    <div className="widgets">
      <iframe 
        title="widgets"
        src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100009419984981&tabs=timeline&width=340&height=1500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" 
        width="340" 
        height="1500" 
        scrolling="no" 
        frameborder="0" 
        allowfullscreen="true" 
        style= {{ border: "none", overflow: "hidden" }}
        allow="encrypted-media">
      </iframe>
    </div>
  )
}

export default Widgets;

Screenshot of styles affecting the iframe: 在此处输入图像描述

Okay, I can't really tell your problem because when I recreate it I get different results:

在此处输入图像描述

Link to Codepen here: https://codepen.io/cypherjac/pen/xxpgGLQ Iframe Codepen

That is most likely some external script or style affecting it


I've copy-pasted the exact code from that link you've mentioned and this is what I get..

Check the codepen for the demo

框架


As I said, check your styles sources and search for the word iframe to find a style that could be affecting it

I had the same problem, then I realized Google Chrome is not able to load it, it is heavy. Try Google Incognito, you will see it perfectly working/loading.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM