I have a reCaptcha in an iframe on my page. The reCaptcha changes it size, but the iframe not. This does not look nice. The users need to scroll now. I saw a few topics that address this problem. They work if the content stays the same during page load. But they do not work if the content changes when the page is loaded, this is happening in my case.
So my question is: how do I make an iFrame adjust size when the page is loaded using only html, css and if needed javascript . This is my html code:
<div>
<iframe aura:id="vfFrame" src="/partners/B2B_ReCaptcha" frameborder="0" width="100%"
allowtransparency="true" />
</div>
Any tips on how to tackle this problem?
Related
I'm trying to embed https://ncase.me/remember/sims/ebbinghaus/?mode=0 onto a page using an iframe. However, when I do, it does not display any of the interactive elements. See https://codepen.io/UYasher/pen/yLXaPeo for the behavior in an iframe:
<iframe
style="width: 600px; height:370px;"
will_source="https://ncase.me/remember/sims/ebbinghaus/?mode=0"
scrolling="no"
class="simulation"
src="https://ncase.me/remember/sims/ebbinghaus/?mode=0"
>
</iframe>
How can I fix this issue so that the iframe shows all the elements present on the original page?
What I think is causing the issue:
I think this occurs because the iframe is unable to load the scripts at the bottom of ncase.me page. I don't understand why this is, though, as javascript appears to work in some iframes. For example, in order for google maps to run, scripts in the contents of the iframe need to be loaded and run.
I am trying to make html page that contain ads that prompt messages and dialoges like image below that makes redirects and loss original page and loss users
Example of dialoge
I want to stop any prompts or any dialoges on this page
My code is very simple html page with iframe
<iframe src="https://go.pub2srv.com/afu.php?id=1326365" height="500" width="900"></iframe>
Thanks
You could prevent the iframe from running Javascript by adding a sandbox attribute to the <iframe> element. Here's how it may look:
<iframe src="https://go.pub2srv.com/afu.php?id=1326365" height="500" width="900" sandbox=""></iframe>
You could refer to this page to understand how that works: https://www.w3schools.com/tags/att_iframe_sandbox.asp
Of course, this is the perfect solution because the iframe might require some privileges, in such case you could add specific privileges that the particular ad requires.
I am using an Iframe to to display the web browser of several satellite receivers in my webpage. However it does not load the page in its entirety. The background shows up but I am not able to see the login and password tabs . It looks like the iframe is blocking some scripts from running or something as when I open the webpage in a normal browser I see the login screen after a few seconds delay.
Here is the code that does not work
<iframe id= "lrx09web" name= "lrx09web" width ="100%" height ="100%"
src="http://192.168.10.109/" sandbox="allow-scripts allow-popups
allow-forms allow-same-origin" scrolling ="yes"></iframe>
Please help
So I have a form that I built with Google Docs because it seemed easier than going from scratch. I've gotten this to work by copy-pasting the code from google's page to one on my domain.
I managed to get it to auto-size its height with this lovely little script I found here: http://www.frontpagewebmaster.com/m-89000/tm.htm (this is not another thread about HOW to dynamically resize an iframe)
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
and the iframe on MY displayed page:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
But now when I hit submit, the confirmation or error page opens in the _parent window (might be _top) - instead of in the iframe (_self, which is supposed to be the default?). target="" is depreciated and doesn't work. This also happens with ANY link inside the iframe.
I've tried a couple different resize scripts, but I don't know enough to figure it out? Or the code doesn't actually work for my purposes? I'm not sure... Here's what I have working: http://fiendconsulting.com/60minutedesign/form-embed.html
What I need: Something that resizes the iframe content on first load of the Parent page and which opens all links in their _self frame/page/whatever.
What I don't care about: Resizing the iframe to fit the content of subsequent pages. If I click a link inside the iframe, I don't need the iframe to resize to whatever page I just went to.
I'm a self-taught programmer and I have some interesting gaps in my knowledge. I also just started learning JS and PHP and am at the Read, Comment and Cannibalize stage. It's better to assume I don't know, and it would help me a LOT if you told me where to Put the code (which document and where in the document). :)
I'm unsure of what you are trying to do because the links you provided do not seem to work; however, I believe your problem might be because of your resize function.
Your function:
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
You take the element 'contentDiv', you take the HTML of your 'iframe' and then you set the same to your content div. This results in your 'iframe' not existing any more.
For example:
let's say my content div had this:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
My iframe has only 1 link: Example Link
After your function, your contentDiv now looks like:
<div class="right" id="contentDIV">
Example Link
</div>
you have effectively removed your iframe and put the contents of the iframe (the link) into your main div. Now if you click on the element, it'll automatically open on the same page - i.e. the 'parent' but there is no parent anymore!
So going forward, you should not be replacing the content; instead you should be modifying the height/width of the iframe. Have a look at:
Adjust width height of iframe to fit with content in it
I have a cross browser iframe that is working minus one small detail. The initial frame load does not re-size all the way. So items are cut off at the bottom of the screen. It re-sizes perfectly if the frame is refreshed.
Is there a way to refresh an iframe once on the page load?
Example is here:
http://www.aans.org/aansmarketplace.aspx
goto multimedia products and select dvd. You will notice content cut off at the bottom of the screen...but if you reload the frame all of the content shows.
<iframe id="iframe" src="empty_script.php" />
<script>
$(function(){
$("#iframe").attr('src', 'your_Script.php');
});
</Script>
How are you resizing the iframe? If you have access to iframe containing page use onload event of iframe, calculate the inner document height and set it to iframe. This works perfectly fine in all browser.