Iframe not displaying all elements of embedded page - javascript

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.

Related

Adjusting iFrame size after page load

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?

How i can stop dialoges in html page

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.

How to display the src content strictly within iframe only

In my application, I am using iframe to display content dynamically within a page, from another domain.
The iframe src can also return a script sometimes. Issue is, in that script sometimes I am having the following part of code:
window.top.document.getElementsByTagName('body')[0].appendChild(data_to_be_appended);
As a result, some of the images are being appended to the parent body tag and overlayed on the actual output and disturbing the application view. I am having a couple of iframes displaying within the same page and having issue with displaying of application view due to this overlay.
Can anyone please let me know that, how I can overcome this overlay issue and display the src related content only within the iframe strictly.

Content do not appear in iframe until i use the edit button in firebug

Its getting me crazy in FF. I tried the same page in Chrome and content appears instantly.
I have an iframe that is loading a chart from another page.
The problem is that the chart do not appears until I inspect the element and click on the edit element button. Once I add space after the src property in the html code (see below for better understanding) the graph will be displayed instantly.
Graph using is of jqPlot
Before
<iframe src="http://localhost:4501/mainpage/graph.aspx"></iframe>
After
<iframe src="http://localhost:4501/mainpage/graph.aspx" ></iframe>
Image here.
alt text http://img294.imageshack.us/img294/252/crazything.jpg
<iframe src="#" onload="this.src='http://localhost:4501/mainpage/graph.aspx'">No Ifrmae allowed</iframe>
i am not sure why it does that could be a something from your computer ... but give this a go.
btw if you get the "no iframe allowed" could be that your ff has disabled iframe. sience you have mentioned that it shows the frame but there is a loading problem... then do check on your firebug... on the NET tab "http://localhost:4501/mainpage/graph.aspx" has been loaded successfully.
Since you're loading them from the same domain, you can access that iframe's js and DOM.
Add some space or and empty <span> to the dom in the iframe window via javascript to force a redraw.
Have you tried to reload the frame manually (I mean, to see what happens)? (Right click it → This Frame → Reload Frame)

A resonable request: Iframes in IE that indicate loading progress?

One thing that bugs me about IE is that when it goes to load a page with an iframe it will wait until the iframe has finished loading before it will render the page. Firefox by contrast will render all the other page elements while the iframe is loading which is really nice if the iframe takes a long time to load because it gives the user some feedback that the page is progressing. It also allows you to do things like display a "iframe loading" messege while the frame loads and swap it out onload of the iframe.
So, I am wondering if anyone has found a workaround for this. Ideally, I'd like to see a cross browser solution that shows a progess bar as an iframe loads on the page. Short of that I'd take a method of implementing an iframe that forces IE to first render the page then load the iframe.
I have seen a couple of interesting jquery progress bars like:
http://plugins.jquery.com/project/jQueryProgressBar
But...(and correct me if I'm wrong here cause my understanding is shaky)...it seems to me the jquery bars only render after the DOM has loaded. In IE the iframe content is not shown until after the DOM is loaded so showing a progress bar at that point is irrelevant.
I've also tried setting the iframe src to loading.htm and then onload switch the src to the content I want. Sadly IE still will not render the page until the final content page comes up (seems strange to me).
Help me stackoverflow, you're my only hope.
What if you were to load the page with an XmlHttpRequest and then replace the contents of the document as/when it loads?
<!-- jQuery example: -->
<div id='content'>Loading...</div>
<script type='text/javascript'>
$("#content").load(url);
</script>
You could set the location of your iframe using JavaScript after the parent window has loaded.
<body onload="document.getElementById('myIframe').location='someurl';">
<iframe id="myIframe">
</body>
Would be the most rudimentary way to do it.

Categories