jQuery: Get iFrame Object from within an iFrame - javascript

I have an iFrame (without id and name)
<iframe src="abc.jsp" scrolling="no" height="100" width="100%"></iframe>
I need to get the iFrame Object from within an iFrame to apply css. If there is a name, I could do window.name, but, there is no Id and name. So, is there a way to get iFrame object?

You can use .contents() to change css in iframe
read http://api.jquery.com/contents/ example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<iframe src="//api.jquery.com/" width="80%" height="600" ></iframe>
<script>
$( "iframe" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
</body>
</html>

Related

Get width and height of an iframe with JavaScript

I have an iframe on a page. For this example, its height is 0px and width is 100px.
I want to console.log these values with JavaScript.
At the moment I can access the iframe using window.frames[0], but how do I then get the width and height? What I'm doing currently returns undefined.
Here is the code and Fiddle
https://jsfiddle.net/prvmwg5q/
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<iframe data-search-id="mainline-top" style="height: 0px; width: 100px;">
Test
</iframe>
<script>
console.log(window.frames[0]);
console.log(window.frames[0].offsetHeight); // Undefined
console.log(window.frames[0].offsetWidth); // Undefined
</script>
</body>
</html>
window.frames does not return the DOM element. https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
Instead, give your iframe an id and use getElementById instead.
EDIT: Or, better, as #HereticMonkey points out:
document.querySelector('iframe')

Changing CSS of element inside an iframe using data attribute

I have an iframe inside my HTML document. This iframe has the data attribute "data-search-id" which is "mainline-top". How do I use JavaScript outside the iframe to change the color of the element with class "base-top". Should I use the data attribute or is there another way? Note I can't add an id or class to the iframe, it is being loaded from somewhere else.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js "integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>
<iframe data-search-id="mainline-top">
<style>.base-top{color: #red;}</style>
<div class="base-top">Stuff</div>
</iframe>
<script>
$('.base-top.).css(color, "blue");
</script>
</body>
</html>
You can insert style tag into iframe.
<iframe data-search-id="mainline-top" id="myIframe">
<style>.base-top{color: red;}</style>
<div class="base-top">Stuff</div>
</iframe>
<style type="text/css" id="mycss">.base-top{color: blue;}</style>
<script type="text/javascript">
$(function () {
$('*[data-search-id="mainline-top"]').contents().find("head")[0].appendChild(mycss);
});
</script>

Accessing Element of frame from other frame in Javascript

How to access a element of a frame from other frame. For Ex:
Main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<frameset rows="33%,33%,*">
<frame class="fra" src="frame1.html"/>
<frame class="fra" src="frame2.html"/>
</frameset>
</html>
frame1.html:
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</HEAD>
<body>
<b><p id="para"> This is frame one.html </p></b>
</body>
</html>
frame2.html:
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</HEAD>
<body>
<b><p id="para"> This is frame two.html </p></b>
<button id="but"> Get data </button>
<script>
$(document).ready(function(){
$("#but").click(function(){
alert(window.frames[0].document.getElementById('para'));
});
});
</script>
</body>
</html>
Once the button is clicked from frame2 then I need to get the data of "para" id element which is present in frame1. So, I tried to access the element as showed
below. But it is not worked.
window.frames[0].document.getElementById('para')
It shows the error as:
Uncaught TypeError: Cannot read property 'document' of undefined
So, window.frames[0] itself undefined
.Can any one help me to solve this?
You should put id on your iframes, like "iframe1" and "iframe2".
<frame class="fra" src="frame1.html" id="frame1" />
<frame class="fra" src="frame2.html" id="frame2" />
Then:
$(window.parent.document).find("#iframe1").contents().find("#para")
should give you access from iframe2 to the element with id "para" in frame one.
$(window.parent.document) will allow you to return from iframe2 to the main document, then find iframe1, then contents() will allow you to go inside iframe1 where you'll be able to find the "#para" element.

javascript code for html frame is not woking

I have frameset with 3 frames, javascript code is not working unable to understand why?.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="frame/frame1.html" />
<frame name="main" src="frame/frame2.html" />
<frame name="bottom" src="frame/frame3.html" />
</frameset>
<body>
<script>
alert('hi');
var iframe = document.getElementsByTagName('frameset')[0];
iframe.body.style.backgroundColor = 'green'
</script>
</body>
</html>
Since you have not mentioned what exactly is not working, I am going to assume here.
You are calling the wrong HTML tag. You need to get the 'frame' tag and not the 'frameset' tag for retrieving the first iframe.
var iframe = document.getElementsByTagName('frame')[0];
Hope this helps.

Using jQuery inside iFrame not working

I have a problem using jQuery inside an iFrame.
Here is my test setup:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
Normally when the page is loaded, in the source, "Z" should be added as a class, but it doesn't. Does anyone have an idea what the problem might be? Both files are in the same (local) folder.
try this
$("iframe").load(function(e){
$(this).contents().find('#B').addClass('Z');
});
You have to run it from a webserver with the HTTP scheme (http:// or https://).
Using the file scheme (file://) prevents this sort of cross frame access in some browsers.

Categories