I using iframe for displaying a image. Here is my code.
index.html
<html>
<head>
<title>Center</title
<script type="text/javascript">
function sample(id){
var frameht=document.getElementById("ifrm").style.height;
var framewd=document.getElementById("ifrm").style.width;
}
</script>
</head>
<body>
<iframe style="width:700px;height:600px;" src="test.html" id="ifrm" onload="javascript:sample(this.id);"></iframe>
</body>
</html>
test.html
<html>
<head>
<title>Center</title>
<script type="text/javascript">
</script>
</head>
<body>
<img src="14.jpg" id="img1" onload="javascript:sample();"/>
</body>
</html>
I want the id of the image in index.html. Is it possible to get? Any one can help? Please!
document.getElementById('ifrm').contentWindow.document.getElementById('img1');
this should work
img = document.getElementById('ifrm').contentWindow.document.getElementsByTagName('img');
img[0].id to get the dinamically id
First get iframe.
var iframe = document.getElementById('ifrm');
Get access to elements of iframe.
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
Then, get id by tagname. In our case img.
var el = frameDoc.getElementsByTagName('img')[0].id;
Here is an example without iframe, to give you an idea how to get id of element after:
http://jsfiddle.net/nukec/eymq2/
Insted of id use name and try this..
<script>
window.frames["fName"].document.getElementById("img1");
</script>
<iframe style="width:700px;height:600px;" src="test.htm" id="ifrm" name="fName" onload="javascript:sample(this.id);"></iframe>
You should use jQuery
var imageObj= $('#myiframe').contents().find('img');
var imgId=$(imageObj).attr("id");
Related
I am trying to create a video element using the 'media-element-and-player' which is a plugin for creating a custom video player.
It is working fine when i create the element myself but it doesn't work when the video element is dynamically created by JQuery.
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source
type="video/mp4" src="batman.mp4"></video>';
div.append(video);
</script>
</body>
</html>
How to achieve this?
And thanks in advance!
This should do the trick:
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Add any other renderers you need; see Use Renderers for more information -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source type="video/mp4" src="batman.mp4"></video>';
div.append(video);
// After adding dynamically new video element, you should initialize the mediaelement plugin on that node as when the page loads this isn't rendered
$('.video-preview video').mediaelementplayer({
pluginPath: "/path/to/shims/",
success: function(mediaElement, originalNode, instance) {
// do things
}
});
</script>
</body>
</html>
If I have an img in index.html:
<script src="script/script.js" type="text/javascript"></script>
<img id="imgb" src="picture/banner1.jpg" border="0">
then in a separate file, such as gallery.html, I need to get the src element of the img in index.html.
I tried writing this function:
function imgbbs(){
var x = document.getElementById('imgb').src;
document.getElementById('imgbb').src = x;
}
Then try using it in gallery.html:
<script src="script/script.js" type="text/javascript"></script>
<body onload="imgbbs()">
<img id="imgbb" src="" border="0">
But it doesn't seem to be working. How can I get the src attribute of an img in a different file?
A way to do this is to load a partial part of the index page using jquery it would be like this:
$( "#your_image_container_in_gallery.html" ).load( "index.html #imgb" );
How to get full url which starts url with http://sin1.g.adnxs.com
here is my code
<div id="testingurl">
<div class="ads98E6LYS20621080">
<!-- we are getting this script dynamically -->
<iframe src="http://testing.com">
if the anchor link start with http://sin1.g.adnxs.com then alert
</iframe>
<!-- we are getting this script dynamically -->
</div>
</div>
if(window.location.origin == 'http://sin1.g.adnxs.com'){
alert('some alert');
}
Use this logic
$( document ).ready(function() {
if (window.location.href.startsWith('http://sin1.g.adnxs.com')){
alert('Your message') ;
}
});
Are you looking something like this:
if (window.location.href.indexOf("http://www.sin1.g.adnxs.com") > -1) {
alert(window.location.href);
}
As other suggested, you can use window.location.origin in order to get that url
Example:
if(window.location.origin === 'http://sin1.g.adnxs.com'){
alert('alert');
}
Generally you can use window.location for:
window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of current page
window.location.protocol returns the web protocol used (http:// or https://)
window.location.assign loads a new document
More info can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
EDIT:
Please have a look at the following example.
In case you have two web pages, parent.html and content.html and content.html is
displayed within parent.html using an iframe.
If you want check the URL of parent.html within content.html you can use the following script:
-------------------------- parent.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
</style>
<script>
window.name = 'parent';
</script>
</head>
<body>
PARENT
<iframe src="content.html" width="200" height="200"></iframe>
</body>
</html>
-------------------------- content.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
background-color: red;
}
</style>
<script>
app = {
start: function () {
window.name = 'content';
var parent = window.parent;
console.log(parent.name);
if (parent.location.origin === 'http://sin1.g.adnxs.com') {
alert('alert');
}
}
};
</script>
</head>
<body onload="app.start();">
CONTENT
</body>
</html>
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
Is there a way to do the following in JavaScript?
get a div by a class name,
get the iframe inside the div
and add an attribute (frameborder = 0)
<html>
<body>
<div class="calendar">
<iframe></iframe>
</div>
</body>
</html>
To get a div by class name:
var allDivs = document.getElementsByClassName("calendar");
Assuming there's only one
var calendarDiv = document.getElementsByClassName("calendar")[0];
Get the iFrame inside:
var iFrame = calendarDiv.getElementsByTagName("iframe")[0];
set an attribute:
iFrame.setAttribute("frameborder", "0");
Or, since getElementsByClassName isn't supported in old versions of IE, consider setting the id on the iFrame and simply doing:
document.getElementById("iFrameId").setAttribute("frameborder", "0");
First of all, you need to give your iframe id.
After that, you can get your iframe with the function document.getElementById(""), and than to change it's property.
For example:
<html>
<body>
<div class="calendar">
<iframe id="myIframe"></iframe>
</div>
<script type="text/javascript">
document.getElementById("myIframe").frameborder = 1;
</script>
</body>
</html>