Background image for iframe - javascript

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div style="background-image: url('images1.jpg');width:800;height:300;border:1px solid black">
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;"> </iframe>
</div>
</BODY>
</HTML>
I need to add background image to iframe. so i tried to add background image to iframe but i cant .. so i did it using div tag as above.
Its works properly in firefox but not in IE. Please help me if u known this

You can with background-image in css
iframe{
background:url(http://www.hindsightfishing.com/images/waves_bg.jpg) no-repeat left top
}​
Demo here http://jsfiddle.net/9tndk/

Related

how to access contentWindow of an <embed> tag?

I have an embed tag inside my html page with src as some external URL (same origin).
This embed tag populates some content inside my (parent)html page.
From my parent html page (top window) I am not able to access contentWindow of tag.
The content of <embed> tag is not media, instead its html content.
A similar question was asked here but question did not get relevant response.
Note : please don't suggest me to use a iframe or object tag
Snippet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed content</title>
</head>
<body style="margin-bottom: 3rem;">
<h1>Embed tag testing</h1>
<div style="border: 1px solid maroon;width: 803px;">
<embed id="custom-embed" src="validation.html" height="500px" width="800px">
</div>
</body>
</html>

Unable to display the video on the webpage which is initially paused using an iframe tag

I need help with a small web development issue
I am unable to display the video on the webpage which is initially paused using an iframe tag
Code:
<iframe src="../videos/java/java7.mp4" frameborder="0" allowfullscreen> </iframe>
I know that I can use youtube API to embed videos and they will be initially paused but is there any way to embed my own videos (that are not available anywhere online like yt or anywhere else) which are linked using iframe tag to be initially paused when page is loaded using HTML, CSS or JS?
If you want to do this best way is to use 2 pages. On the first page make a video player. Suppose we are giving the page name videoPlayer.html
Here is the code of the videoPlayer.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<style>
body {
width: 100%!important;
height: 100%!important;
}
video {
width: 100%!important;
height: 100%!important;
}
</style>
</head>
<body>
<video controls>
<source src="../videos/java/java7.mp4" type="video/mp4">
</video>
</body>
</html>
Now finally open a page that you want and embed the videoPlayer.html page. Suppose we are naming it as index.html
Here is the code of index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main page to embed iframe</title>
</head>
<body>
<iframe src="path/to/videoPlayer.html" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Add meta-viewport tag to header of OVH Redirection Technology page

I have this issue when deploying an app.
My provider is OVH and for some reason the adopted mode of deployement uses an "invisible redirection" which puts the URL inside of a frame.
The end result is something like this:
<html>
<head>
<title>espaceClient</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="ORT - Ovh Redirect Technology">
<meta name="url" content="http://XXX.XXX.XXX.XXX:YYYY">
<meta name="robots" content="all">
</head>
<frameset rows="100%,0" frameborder=no border=0>
<frame name="ORT" src="http://XXX.XXX.XXX.XXX:YYYY">
<frame name="NONE" src="" scrolling="no" noresize>
<noframes>
<body>Click here<hr></body>
</noframes>
</frameset>
</html>
The design of the page is mobile-friendly and responsive, for some reason, the frame kills these aspects. In other words: the page displays on a mobile as if it were a desktop screen of a laptop.
After some more research, I understood that it would be necessary to add a <meta name="viewport" content="width=device-width, initial-scale=1.0"> to this page, but the provider does not allow configuration of the page, hence I need to do it through javascript or jQuery.
I thought getting the parent document of the frame-document would do, but it does not:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
window.parent.document.getElementsByTagName('head')[0].appendChild(viewPortTag);
My question is the following: how could I make a script in the http://XXX.XXX.XXX.XXX:YYYY to append the <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the parent page as such:
<html>
<head>
<title>espaceClient</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="ORT - Ovh Redirect Technology">
<meta name="url" content="http://XXX.XXX.XXX.XXX:YYYY">
<meta name="robots" content="all">
<!-- added through some javascript written in http://XXX.XXX.XXX.XXX:YYYY -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<frameset rows="100%,0" frameborder=no border=0>
<frame name="ORT" src="http://XXX.XXX.XXX.XXX:YYYY">
<frame name="NONE" src="" scrolling="no" noresize>
<noframes>
<body>Click here<hr></body>
</noframes>
</frameset>

Setting up Background image for a canvas

I am trying to set up a image to a canvas but I am not able to do it. I am not able to find any mistake. The canvas comes up on the inspect element but the image is not setting up.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="CSS/styling.css">
<script src="JavaScript/setImage.js"></script>-->
</head>
<body>
<canvas id="canvas" style="color: #0cff15; -webkit-background-image: url(/cheque.jpg)" ></canvas>
</body>
</html>
You don't style a canvas element like a div. You have to get its context via javascript and draw into it. Search for "mdn canvas" for documentation and read a bit.
You can set background image using css and you should give width and height property as well. Please see my demo below.
#canvas{
color: #0cff15;
background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
-webkit-background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
border:1px solid black;
width:500px;
height:500px;
}
<canvas id="canvas"></canvas>

get meta tags and img tags contents from an iframe source using jQuery/Javascript

I have an HTML file with the following content
<html>
<head>
<meta charset="utf-8">
<title>builder 1.0</title>
<body>
<iframe width="100%" height="100%" src="a.html" name="cxsideframe" scrolling:'no';="" id="frame1" style="overflow:hidden;">
</iframe>
</body></html>
The content of a.html is
<html>
<head>
<meta charset="utf-8">
<title>builder v1.0</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<meta content="desc goes here" name="description">
<meta content="auth name" name="author">
<body>
<img src="http://example.com/images/01._V397411194_.png" style="display:none" alt=""/>
<img src="http://example.com/images/V386942464_.gif" style="display:none" alt="" />
</body></html>
I need to extract the contents of meta tags and image lists of a.html from the parent page using jQuery or javascript.
I tried
alert($('#frame1').contents().find($('#meta[name=description]').attr("content")).html());
and
$('meta[name=author]').attr("content");
But did not got the solution.Any idea on how to do this?
To get the value of attribute content Use
alert($('#frame1').contents().find('meta[name=description]').attr("content"));
and to get all the images as array
$('#frame1').contents().find('img')
EDIT : Make sure that you are calling these methods after the iframe content has been loaded.
So use
$("#frame1").ready(function(){
alert($('#frame1').contents().find('meta[name=description]').attr("content"));
alert($('#frame1').contents().find('img'));
})
for example place a button and on button get content of iframe
function getContentFromIframe(){
var myIFrame=document.getElementById('iframe');
var content=myIFrame.contentWindow.document.body.innerHTML;
}

Categories