This question already has answers here:
Capture iframe load complete event
(6 answers)
Closed 6 years ago.
I have an iFrame object that are defined like this:
<iframe src="iFrame SRC" frameborder="0" width="160" height="200" scrolling="no" longdesc="longdesc URL">
</iframe>
Now this frame took a long time to load, is it possible to make a loading text that simple says Loading frame..., and when the frame appears make the text go away? I tried putting the text right above the frame definition like this:
Loading...
<iframe ...>
</iframe>
It does stay on top of the frame but never goes away. How do you put a loading text for an iframe?
You can wrap the iFrame in a DIV with a class for loading a back ground image.
<div class="iframe-loading">
<iframe src="iFrame SRC" frameborder="0" width="160" height="200" scrolling="no" longdesc="longdesc URL">
</iframe>
</div>
.iframe-loading {
background:url(../images/loading.gif);
}
A long time ago I used to do this:
<iframe src="iFrame" etc. ...>
Loading frame...
</iframe>
Related
In my Angular app, I have included the following snippet in an html template:
<embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf">
It appears as follows:
When I click open, the pdf file is downloaded.
How can I simply display the content instead of downloading it?
<iframe src="https://docs.google.com/viewer?url=https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&embedded=true" frameborder="0" height="600" width="100%"></iframe>
Use Below Code
<iframe src="https://docs.google.com/viewer?url=File_URL&embedded=true" frameborder="0" height="1100px" width="100%"></iframe>
Set height as per your need or give the height as 100% and set the height for the parent div.
Check and update if it works.
I have a list of urls (lets call them url1.com,url2.com,url3.com). I want to load their contents into an ifram so i can copy them. However, if i create seperate iframes for each url i cannot copy them at one. Is it possible to load multiple urls into one ifram which i can then copy. The urls only contain a string of letters and nothing else.
https://pastebin.com/mQVRPXe4
<iframe src="https://url1.com" src = name="targetframe" allowTransparency="false" scrolling="no" frameborder="0" >
</iframe>
<iframe src="https://url2.com name="targetframe" scrolling="no" frameborder="0" >
</iframe>
<iframe src="https://url3.com name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
You can do a couple of things. Namely, use ajax requests or style the iframes. You can easily remove the border on the iframe with the frameBorder attribute.
I know this isn't really the best answer, and I'm not really sure what you are really trying to do here, but I was asked to put this as an answer
with iframe i embedded a page to my site like this.
<iframe src="https://www.w3schools.com" width="80%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
now w3schools.com uses w3-row w3-white w3-padding w3-hide-medium w3-hide-small class in header and i want to hide it in my page?
How to perform this.?
If your iframe loads an address from same domain, Set an id for your frame and do this:
var frame = window.frames['myFrame'];
$(frame).contents().find('p').hide();
Is it possible to add "sub-text" to an iframe? For example I have the following code...
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/apkRBANIKxc" frameborder="0" allowfullscreen></iframe>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/h7ArUgxtlJs" frameborder="0" allowfullscreen></iframe>
And I want to be able to add some text beneath that explains in detail the video etc, but whenever I've used a simple tag within or just outside of the iframe, it treats it as if the iframe isn't present and the text always appears at the top of the page instead of beneath the iframe. Maybe I need to embed this video in some other way other than an iframe in order to be able to use text along with it?
I'm not sure what isn't working for you, maybe your CSS is messing it up?
I was able to use the iframes of the videos and add a little description to them. Here is a sample, it's also on jsFiddle
<div>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/apkRBANIKxc" frameborder="0" allowfullscreen></iframe>
<p>Pharoahe Monch Simon Says (Avicii Remix)</p>
</div>
<div>
<iframe class="musicsamples" width="80%" height="315" src="http://www.youtube.com/embed/h7ArUgxtlJs" frameborder="0" allowfullscreen></iframe>
<p>deadmau5 feat. Rob Swire - Ghosts N Stuff</p>
</div>
I am using iframe you-tube video in my website.
Sample Code:
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
If I click the youtube video it will redirect to the external page. I used the below code.
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
I know my way is wrong. It is not working. Please confirm to do this in anyway?
This will not work. To solve your problem you have to use javascript. For reference you can check following thread
Detect Click into Iframe using JavaScript
Another Solution is
<div style="position:relative">
<div style="position:absolute;width:414px;height:270px" onclick='window.location.href="http://google.com"' ></div>
<iframe width="414" height="270" src="samplecode" frameborder="0" allowfullscreen></iframe>
</div>
Here I superimposed another div overiframe (we will not set any background for it, so iframe content will be seen) which will have onclick function which will take user to desired url