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

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.

I'm using iframe for Facebook Embed Post
If using Normal Chrome iframe, NOT working!
If using Incognito Mode in Chrome, it works!
If using Edge, it works!
If I use my friend's PC chrome, it Works!
** Problem is the chrome cache issue
Solution
Ctrl + Shift + Del Open the "Clear Browsing Data" in chrome
select "Cookies and Other Site Data"
select "Cached Images and files"
Click "Clear Data"
Follow the setting, then click "Clear Data" which will do.
hope it helps.

Related

Setting iframe src via JS isnt working specifically for sharepoint

Setting src directly in iframe is working as expected
I'm trying to embed a Sharepoint document here.
For eg
<iframe src="https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&action=embedview"
width="476px"
height="288px" />
Whereas when I set the src in the script it's failing
<iframe id="x" width="476px" height="288px"></iframe>
<script>
document.getElementById('x').src = "https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&action=embedview";
</script>
This happens explicitly with SharePoint. So I would like to understand a couple of things here.
1. Am I doing something wrong?
2. Is there any CSP headers which block the parent from adding via JS?
3. Is there any official way from SharePoint to allow this?
3. Is there any way to hack this?
Thanks in advance.
Since this happens across chrome, safari and firefox I think it's not a bug in a specific browser.
Trying this in Firefox yields this error message:
To protect your security, login.microsoftonline.com will not allow
Firefox to display the page if another site has embedded it. To see
this page, you need to open it in a new window.
Opening the console gives this message:
The loading of [url] in a frame is denied by “X-Frame-Options“
directive set to “DENY“.
This is a header that's set by login.microsoft.com to disable embedding the link as an iframe.
This link details this design choice: https://learn.microsoft.com/en-us/sharepoint/troubleshoot/sites/cannot-display-sharepoint-pages-in-iframe
The link mentions you can override the behavior by setting 'AllowFraming', though it doesn't recommend it, as there may be site-breaking changes by embedding it.
A guide to use this feature can be found at this link
The problem is in, javascript amp; should not represent as &.
Change your link to
<body>
<iframe id="x" width="476px" height="288px"></iframe>
<script>
document.getElementById('x').src = "https://rocketlane123.sharepoint.com/sites/MyDocsforSP/_layouts/15/Doc.aspx?sourcedoc={6d327004-5d52-4e42-9707-c964631f8e65}&action=embedview";
</script>
</body>

Unable to interact with iframe in Chrome or IE - cross domain JS error?

I am attempting to make my website use TLS / https. This problem occurs only on the https version and not the older http version of the website.
I have a link on my website which when clicked reveals an iframe on top of the rest of the website content.
The link looks like this:
Speed Check
It reveals this div (slightly modified to remove my actual URL)
<div id="speedtestmodal" class="reveal-modal tiny open" data-reveal="" role="dialog" style="display: block; opacity: 1; visibility: visible; top: 1130px;" area-hidden="true">
<iframe width="620" height="420" style="visibility:;" id="example" src="https://page.domain.com" scrolling="no" frameborder="0"></iframe>
</div>
This works and the iframe and expected content is visible, the problem I have is that the page in the iframe contains a text box which the user should fill in. This behaves as expected in Firefox but in Chrome or IE attempting to click into the text box closes the entire Iframe.
The website is beta.domain.com and the iframe is page.domain.com so I thought the problem may be related to cross domain JS calls, to try and get around this I added the following to the head on both websites (as described at http://madskristensen.net/post/iframe-cross-domain-javascript-calls):
<script type="text/javascript">
document.domain ='domain.com';
</script>
But it has made no difference. Is there something that I'm missing here?
Is there any more information that I can provide to help debug this?
It turned out the problem was CSS related and it was only working in firefox due to a bug in the browser.
The Z-index value of the modal was causing it to be hidden behind another semi-transparent modal which is part of a separate function of the website.

How to change iframe source

the issue is that I'm trying to develop a web site and I'm using Google Web Design. So far so good. I've inserted an iFrame and I want to change it's source when I'm pressing a button. Every search that I've googled speaks about "src" but my iFrame has "source" attribute. I've tried almost every solution that I found but I gave up. It may be a stupid question but how am I supposed to do it? I've used "document.getElementById("myId")" or "window.frames['id']"... Not a chance. Anyone have an idea? Thanks a lot.
<iframe is="gwd-iframe" id="textToShow" source="" class="gwd-iframe-15nv gwd-gen-mv4zgwdanimation" style="background-image: none;" scrolling="auto">
</iframe>
gwd.goOnTheWeb = function(event) {
//should be in here
};
Please take a look into Google Web Designer Help > The iFrame component.
After some researches I've managed it. Finally, in Google Web Design there is an option in the right-click -> Add event... on an imageButton, called iFrame, that allows you to load an external page into an iframe. On the other hand, hopefully, I've found that somehow the "source" attribute of an iframe that the software writes automatically in code (I'm using OS X), is about to "guide" Safari while "src" is for browsing on Windows. Excuse me, please if I'm kind of "out-of-topic" but even being in IT, I've never developed a site since. So, have mercy. :)
myBtn.onclick = function() {
var filepath = 'video/hollywood-movies-2.mp4';
document.getElementById('textToShow').src = filepath ;
}

Twitter Timeline widget not working in Chrome

My Twitter Timeline widget won't load in Chrome, but loads in both Firefox and IE perfectly.
When I check the console for Chrome, I get "Failed resource: http://platform.twitter.com/widgets.js" but when I click on that link, it works.
This is the code I am using:
<a class="twitter-timeline" href="https://twitter.com/funnelholic" data-widget-id="307229764530339840">Tweets by #funnelholic</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I have also whitelisted both www.funnelholic.com and funnelholic.com
The site in question is: http://funnelholic.com, this is a Wordpress site, and I am using the Text widget to display it.
How can I fix this?
I had the same problem and was very frustrated that it did not work in Chrome.
It seems that the reason was
Adblock Plus
When I deactivated Adblock Plus for my page, it worked!
Guess you, #theintellects, also had Adblock active on the computer it did not work on.
With that said, I have added information on my webpage, that if the user uses Chrome and they don't see any Twitter timeline, they need to deactivate Adblock Plus for this page
Went home and tried it on a different computer in the same Chrome versions. Guess it somehow wasn't getting rid of cache...
you need to add this script
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Trouble between an injected iframe and other web page (Google, Gmail, Pdf)

Well i'm currently developping my Toolbar for Google Chrome as a Extension. The main principe is that i'm all the time injecting the toolbar as an iframe by using the Content Script.
But now i see a couple of bug with gmail, google map/search, pdf an maybe other that i've not yet see...
Let me explain, when i go on gmail, i don't see my toolbar at all...
When i open Google, it seems really normal :
But then when i start a search my toolbar seems to overide the top link (web, images, videos, maps,...) I can't click on them anymore...
Next problem is when i'm trying to go on google map or trying to open a PDF, it seems to give the same css to these web pages from my toolbar...
Google Maps :
PDF :
Hope i where clear enough, do not hesitate to ask me question if necessary ;)
Why don't you use absolute/fixed positioning and style attributes? Using style attributes would remove the issue of the possible spread of CSS.
To remove the toolbar from pdf, you could write something that removes the element when on pdf?
Well, i've find a good solution to resolve the problem with PDF and Google Map it was a problem on my CSS.
About the google Search now it works perfectly by setting the body webpage as a fixed page like NeXXeus tell me but there is still a problem.
Check this out :
EDIT : We don't really see, the argument select/deselect is top: 0px;

Categories