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 ;
}
Related
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>
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.
I have problem with Facebook Comments plugin. Is it event possible to embed it on UIWebView in iOS application? I don't mean using loadUrl method ... but using loadHTMLstring ( I want it only localy on my application, without using any messy obj-c code if it's possible ). I'm using HTML5 code for it, but it's not working on simulator ...
Am I doing anything wrong?
I've read similar topics, but haven't found any solution, that might help me.
Thank's in advance for any help!
well, i found some workaround for this problem. what i needed is to load local html page with comments plugin embedded. this html page is stored in resources of project. so the code for me was something like that:
[reviewsView loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:#"comments" withExtension:#"html"]]];
where reviewsView is a UIWebView element. however, it didn't work correctly in the end - comments had loaded, but facebook "loading progress bar" was still animating and for some reason login button was unclickable. so i just returned to the idea with remote html comments page.
I'm working on a web application that requires me to use a modalpopup I recently made within a user control. Everything works as expected, but somehow after a PostBack, and not always, the panel used in the modal flickers (blink) on the screen very briefly.
I have read on dozens of forums saying that I needed to add "display:none;" to the style tag of this panel. This usually "helps", and most of the postbacks don't show the panel, but some do. Seems that the property is being ignored somehow, but I can't find where, how, when.
I have also tried debuging the javascript with firebug, tested all page events and even tried taking a look at the ajax modalpopupextender sourcecode, but couldn't fix this issue.
The browser I HAVE to make this web application work is Mozilla Firefox 3.5.10, that is the current version on the company I work for. This can't be changed due to corporate policies.
Due to quality and user experience issues that arise with this flickering, I leave it as is, so if anyone can help me out I'd appreciate that. I'm also on a rather tight schedule, so any quick help will be appreciated too, as I'm ready to try and test changes on the go.
Please let me know of any doubts or questions.
Thanks in advance.
If your CSS is in an external file, it's possible that the HTML is being loaded and rendered before the CSS is downloaded, causing the flicker. If this is the case, then adding style="display:none" directly to the HTML tag ought to fix it.
The following works for me:
<script type="text/javascript">
window.onbeforeunload = function () {
document.getElementById("PanelDialog").style.display = "none";
}
</script>
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;