I have an iframe that opens a page with an ad.
<iframe frameborder=0 height=100% marginheight=0 marginwidth=0 scrolling=no seamless src="http://pad.ample.pw/ad1/ad1.php" style=margin:0;padding:0;overflow:hidden;border:0 width=100%></iframe>
However, when I open it on the iPhone. It's blank.
Is there something preventing iOS from displaying this frame?
Note:
If you open the url outside of an iframe it redirects elsewhere. In my case will redirect to a FB page.
The attributes in ur iframe element aren't into quotes.
For example, it should be
< iframe style="margin : 0px ; padding : 0px ">
and so on.
Since your syntax is wrong, the html wont render properly.
Related
I have a web-page that allows the user to enter YouTube video URLs and display them in thumbnail previewers which do not auto-play them. When the user enters the URLs:
some may be valid and load,
some are not valid and don't load,
some, while valid URLs aren't embeds with URLs similar to
https://www.youtube.com/watch?v=NCZaq9pSBxQ and don't load, and
finally, while very rare, are valid, aren't embeds, but still load.
So, I don't want to prevent the user from entering any of these YouTube URLs, embed or not. Instead, I want to detect when the YouTube video doesn't load.
Here is some of the HTML 'code' that I'm using that shows one YouTube that doesn't load and one that does:
function update_ytplayer2( This ) {
// validate the textarea's value -- omitted
document.getElementById( 'ytplayer_2' ).src = This.value.trim();
}
.webvideourlPreview {
height: auto;
width: 75px;
max-height: 110px;
margin-right: 3px;
}
textarea {
width: 400px;
}
<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
video="true" youtube="true" style="display: block;"></iframe>
⁝<br />
<textarea onblur="update_ytplayer2( this );">https://www.youtube.com/embed/0376xWdwBBs</textarea><br />
⁝
<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/embed/0376xWdwBBs"
source="https://www.youtube.com/embed/0376xWdwBBs"
video="true" youtube="true" embed="true"
style="display: block;"></iframe>
Here is a codepen that shows the second iframe like it does in my web-page. which uses the same code and css styles as used above.
Here is what I see in the Chrome Browser's Inspect Element panel:
⁝
<!-- Non-Working YouTube Video -->
▼<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
video="true" youtube="true" style="">
</iframe>
⁝
<!-- Working YouTube Video -->
▼<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/embed/0376xWdwBBs"
source="https://www.youtube.com/embed/0376xWdwBBs"
video="true" youtube="true" embed="true" style="display: block;">
#document
<!DOCUMENT html>
▶<html lang="en" dir="ltr" data-cast-api-enabled="true"
wtx-context="AE89359A-CCF4-46DF-933F-36746B4B5815">
</html>
</iframe>
⁝
Both of the iframe tags are open, but I noticed that the non-working YouTube doesn't show anything between the open and close iframe tags, but the working YouTube does.
Is there some way that I can detect this in javaScript?
I saw that there was a .contentDocument property, but in Chrome this is always null, and there is a .contentWindow property, but both the non-working and working YouTube videos pretty much appear to show the same object/structure and so far I haven't found anything in the object that I can use to programmatically determine which video isn't working and which is.
I understand that there are two events that can be used, error and load, according to the information that I've found on these event because I'm not loading a file into the iframe, the events don't 'fire' whether the YouTube video loads or not.
I also saw somewhere in StackOverflow that the native size properties contain size of the small sad-face graphic, but I don't see how to get that information, especially since the .contentWindow doesn't appear, as far as I can tell, to these properties when I inspect these elements. However, I'd rather not rely only on the size of the image alone to determine the failure of the load.
Thanks
Actually YouTube doesn't allow 3rd parties to embed their site directly.
That is why using links like https://www.youtube.com/watch?v=NCZaq9pSBxQ or https://youtu.be/NCZaq9pSBxQ will raise Refused to display 'https://www.youtube.com/watch?v=NCZaq9pSBxQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. warning in your console.
Fortunately Youtube offers "embed video" option, to allow us to embed videos. Using this feature I had written my code. Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
.webvideourlPreview {
height: auto;
width: 75px;
max-height: 110px;
margin-right: 3px;
}
textarea {
width: 400px;
}
</style>
<script type="text/javascript">
function update_ytplayer2( This ) {
//capture trimmed value
let val = This.value.trim();
let embed_src;
if(val.includes('watch?v='))
embed_src = This.value.replace("watch?v=", "embed/");
else if(val.includes('youtu.be'))
embed_src = 'https://www.youtube.com/embed/'
+ val.split('/').pop();
// validate the textarea's value -- omitted
document.getElementById( 'ytplayer_2' ).src = embed_src;
}
</script>
</head>
<body on>
<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
video="true" youtube="true" style="display: block;"></iframe>
⁝<br />
<textarea onblur="update_ytplayer2( this );">https://www.youtube.com/watch?v=NCZaq9pSBxQ</textarea><br />
⁝
<iframe id="ytplayer_2" class="webvideourlPreview"
style="display: block;"></iframe>
</body>
</html>
In the snippet, inside function update_ytplayer2 we using val variable to save trimmed value of our <textarea>. Next depending on the type of link, we may or may not altering it to get link in the form of https://www.youtube.com/embed/[unique_identifier] and save it into another variable embed_src.Finally, setting embed_src as our <iframe> source.
Function update_ytplayer2 called each time user generate blur effect on <textarea> by moving focus away from it which in turn updates the video shown in <iframe id="ytplayer_2">.
Note: I had removed the HTML5 non-standard attributes from the <iframe id="ytplayer_2">.
I was wondering that why the office form cannot be embedded into iframe perfectly.
Like the following code
<iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=Ix5rlILy0USDoDcUdHBCThkWvcx4TptKrO0BZZzx9edUMzFRTDdOMTk1NThIMEs1WFFSNzBWNFdFUi4u" style="height: 300px;">
<p>Have you completed the survey?.</p>
</iframe>
https://jsfiddle.net/n7e3wv6v/
It only displays the pop-up link, the users have to click the link and then fill the question on the pop-up page which is not convenient.
Is there a way to embed the whole form?
Make the height and width of iframe >= 350.
<iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=Ix5rlILy0USDoDcUdHBCThkWvcx4TptKrO0BZZzx9edUMzFRTDdOMTk1NThIMEs1WFFSNzBWNFdFUi4u" height="350" width="350">
</iframe>
This works! below 350 dimension it doesn't.
https://jsfiddle.net/qnsj1k3o/2/
How do I open an iframe in a new window? I tried with "scrolling='auto'". It did not work.
I put my code here:
<iframe width="572px" scrolling="auto" height="335px"
frameborder="1" src="http://XXXX.com/iframe-page"
style="border: 0px none #ffffff;" name="national-campaign"
marginheight="0px" marginwidth="0px">
</iframe>
I want to open a link in a new window. I have two sites, a corporate site and a dealer site. On the corporate site, I have a page with only an image that I want to display in both corporate site and dealer site. When you click on the image, it goes to view detail page. However, what I want in my dealer site is, when you click on the iframe image, it opens the tab in a new window, instead of displaying detail page inside the iframe.
Any ideas? Cheers.
You can do it with jquery and window.open method.
HTML:
<iframe id="iframe" width="572px" scrolling="auto" height="335px"
frameborder="1" src="http://XXXX.com/iframe-page"
style="border: 0px none #ffffff;" name="national-campaign"
marginheight="0px" marginwidth="0px">
</iframe>
JS :
var iframe = $("#iframe");
var newWindow = window.open(iframe.attr(src), 'Dynamic Popup', 'height=' + iframe.height() + ', width=' + iframe.width() + 'scrollbars=auto, resizable=no, location=no, status=no');
newWindow.document.write(iframe[0].outerHTML);
newWindow.document.close();
iframe[0].outerHTML = ''; // to remove iframe in page.
The easy way is to use a hyperlink with an attribute target="_blank".
If the height and width are important to you (cf. your example), then you can use the JavaScript method window.open.
Try to add target="_top" inside that link.
or alternatively if you need to open a new page from a link inside an iframe if i understood correctly you can:
Using jQuery:
$('iframe a').attr('target', '_blank');
I would recommend that you just use a hyperlink to another page rather than an iframe. Or a screenshot image that is actually a link.
Some users may be 'smart' enough to right-click within the iframe (in internet explorer) and select a 'open in new window' option, but others wouldn't do that.
I've messed up my main question so I here I go again.
I have a mainrecord.html that uses iframe to display 2 html - top and lower. On the top html page I have a save button. This save button does some data work and then goes to a different html. The problem is the lower iframe is still there. Here is what I have in the mainrecord.html:
<iframe scrolling="no" noresize target="middle" src="<%=JustPath(oProp.ScriptPath)+[/top.html?id=]+tmpid"%> name="top" height="62%" class="auto-style1" style="width: 100%">You need a Frames Capable browser to view this content.</iframe>
<iframe scrolling="no" noresize target="middle" src="<%=JustPath(oProp.ScriptPath)+[/lower.html?id=]+tmpid"%> name="lower" style="width: 100%; height: 35%">You need a Frames Capable browser to view this content.</iframe>
<script type = "text/javascript" >
element = document.getElementById("lower");
</script>
In the top.html there is a save button that goes to a saverecord.html. I do some data work and then I do this:
<script type="text/javascript">
document.removeChild(element);
</script>
<% oResponse.Redirect(JUSTPATH(oProp.ScriptPath)+[/viewrecords.html])%>
It correctly displays viewrecords.html. However, the iframe containing lower.html is still there.
Any suggestions?
TIA.
You need to refer to a wrapping element in your JS to remove this Iframe.
<div class="frame2">
<iframe scrolling="no" noresize target="middle" src=""..." name="lower" style="width: 100%; height: 35%">You need a Frames Capable browser to view this content.</iframe>
</div>
JS
element = document.getElementById("frame2"); <-- this is the wrapper for your Iframe
document.removeChild(element);
I am using iframe in jsp page.
<iframe frameborder="1" src="view/jsp/refreshChat.jsp" STYLE='width:20%;' />
But when I run that page its gives a blank page.
This is an example of an iframe code:
<iframe src="page_to_show_inside_iframe.jsp" style="width:100%; height:250px;">
<p>Text to show in browsers that don't support iframes.</p>
</iframe>
Perhaps you're lacking height value.
Also, be sure the value for src attribute is correctly referenced, ie. relative path is built OK ( if your parent page URL is http://localhost:8080/mysite/myparentpage.jsp try to load your child page pasting src value instead your parent page's name, http://localhost:8080/mysite/view/jsp/refreshChat.jsp , test this in a new window or tab)
Check if src="view/jsp/refreshChat.jsp" is proper. From what location You use this?
DO not forget to add http:// to your web url. Also, avoid localhost. Use the IP address.