Accessing Element of frame from other frame in Javascript - 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.

Related

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>

Access variable from iframe without editing iframe page

I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)

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.

Access cross domain nested iframe from within the main iframe

I have a page that has a cross-domain iframe. On the page loaded in the iframe is a print button that runs some javascript to print an iframe named printFrame sitting on the page (on the nested page, not on the parent page). When I click on the button, in FF it works but IE gives me an error: frames.printFrame is null or not an object. I'm confused. The code is not trying to access the parent document, why isn't it working?
The code crashes on line 9 of iframedoc.html, when I try to access the printframe
Parent document HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<iframe src="http://www.otherdomain.com/iframeDoc.html"/>
</body>
</html>
iframedoc.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function printContent(){
frames['printFrame'].focus();
var printFrameDiv = frames['printFrame'].document.getElementById("printDiv");
printFrameDiv.innerHTML = document.getElementById('printableContent').innerHTML;
frames['printFrame'].print();
window.focus();
}
</script>
</head>
<body>
<iframe id="printFrame" name="printFrame" src="/printFrame.html"></iframe>
<div id="mainContent">
<div id="printableContent">
My printable content is here
</div>
<div id="nonPrintableContent">
Content that I dont want to print is here
</div>
Print
</body>
</html>

Categories