I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined.
What is the equivalent for window.top.frames['f2'] for chrome.
Give your FrameSet and your Frame an ID:
var $fs = $("#fs");
var f2 = $fs.find("#f2");
f2 is now a jQuery object.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.
Related
Created two simple html files test.html and frame.html and here I am loading frame.html inside the test.html. But calling functions of frame.html in the test.html is not working, its giving function not defined
test.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h3 align="center">TEST AB TEST</h3>
<div id="load_frame" ></div>
<div style='padding:30px;background-color:red; '>
<input id="test_Button" type='button' value='test_Button'/>
</div>
<script>
$(function(){
$('#load_frame').append('<object data="frame.html"/>');
});
$("#test_Button").bind( "click",function(){
console.log('aaaaaaaa');
myFunction1();
});
</script>
</body>
</html>
frame.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h3 align="center">TEST Frame</h3>
<div style='padding:30px;width:500px;'>
<input id="frame_button" type='button' value='frame_button'/>
</div>
<script>
function myFunction1() {
alert('Inside frame');
}
$("#frame_button").bind( "click",function(){
myFunction1();
console.log('aaaaaaaa');
});
</script>
</body>
</html>
Error
Uncaught ReferenceError: myFunction1 is not defined
You need to call the function in the context of the frame window
$("#test_Button").bind( "click",function(){
//reference to the frame window
var frameWindow =$('#load_frame object')[0].contentWindow;
// the function is a property of that window
frameWindow.myFunction1();
});
DEMO
You can not simply access the content of an other frame. This fact is implementet by browser vendors for security reasons.
If you really want to "talk" between frames you can use postMessage for that: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I'm newbie to web programming and I can't understand why the following code doesn't work.
It is supposed to remove permanently the content of the div element when the button is pressed, but it disappears for a while and then reappears.
The code is the following:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form onSubmit="prueba()">
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I believe what's happening is that your button is submitting a form, which sends the form to the web server then reloads your page. So:
Your "onSubmit" JS runs immediately and clears the div content.
Your page reloads and the content comes back.
Try something like this instead of a form (i.e. remove the surrounding form tag):
<button onclick="prueba()">Entrar</button>
Try this. You don't need a form to hide a DIV
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<input type="button" onclick="prueba()" value="Entrar">
</body>
</html>
DEMO : http://jsfiddle.net/36pvts4t/2/
try this , for me this is working .This code is remove the text in div with id "uno" , on form submit .
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
console.log("Inside the function preueba ");
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form action="#" method="get" onSubmit="prueba()" target="_blank" >
<input type="submit" value="Entrar" >
</form>
</body>
</html>
Just a quick question here. How can I call a click event of a button that is wrapped inside another html tag inside a main html page?
Sample code below is copied from a Dynamics CRM page source and the second html tag is inserted as a web resource on a Dynamics CRM form.
UPDATED CODE
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("first ready ...");
//alert($("#btnHangup"));
$("#btnHangup").click();
});
</script>
</head>
<body>
<table>
<tr>
<td class="ms-crm-Field-Data-Print" colspan="2" rowspan="2" style="" visible="false">
<div class="ms-crm-Field-Data-Print" style="" data-height="48" colspan="2" rowspan="2" id="WebResource_Hangup_d">
<span>
<iframe frameborder="0" id="WebResource_Hangup" onload="if(!IsNull(Mscrm.InlineIFrameControlView)) Mscrm.InlineIFrameControlView.loadHandler("WebResource_Hangup")" class="ms-crm-Custom-Read" style="border: 0px; visibility: visible; display: block;" tabindex="0" url="/5Um2/%7B635594134590000132%7D/WebResources/cc_HangupButtonWebResource?orglcid=1033&orgname=15Um2&userlcid=1033&type=10006&typename=cc_&id=" src="/_static/blank.htm" iswebresource="True" scrolling="no">
#document
<html>
<head>
<meta charset="utf-8">
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
</head>
<body style="word-wrap: break-word;">
<title></title>
<script src="../WebResources/ClientGlobalContext.js.aspx" type="text/javascript" script=""></script>
<script type="text/javascript" src="/15Um2/_common/global.ashx?ver=-860134328"></script>
<script type="text/javascript" src="/15Um2/_common/windowinformation/windowinformation.js.aspx?lcid=1033&ver=-860134328"></script>
<script type="text/javascript" src="/15Um2/_common/entityproperties/entitypropertiesutil.js.aspx?tstamp=100732643&ver=-860134328"></script>
<script src="../WebResources/cc__wizard" type="text/javascript"></script>
<link href="../WebResources/cc_Style" rel="stylesheet" type="text/css">
<script src="../WebResources/cc_jquery_163" type="text/javascript"></script>
<table>
<tbody>
<tr>
<td>
<input class="hangup-btn" title="Click to hangup" id="btnHangUp" style="width: 110px;" type="button" value="Hangup">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#btnHangUp").click(function () {
alert("hangup clicked");
});
});
</script>
</body>
</html>
</iframe>
</span>
</div>
</td>
</tr>
</table>
</body>
</html>
Your code in the main page is looking for #btnHangup in that document, but it's not in that document, it's in the document associated with the iframe.
For the rest of this answer I'm going to assume you can't change the contents of the iframe, as seems to be suggested by your comments on the question.
To trigger a click on the element, you'll need to:
Wait for the iframe to load
Retrieve the element from the iframe's document
Trigger the click on that element
So I would do something like this (see comments):
// When our document is ready...
$(document).ready(function() {
// Try to do the click
tryClick();
function tryClick() {
var frame, button, jqFrame;
// Get the frame
frame = $("#WebResource_Hangup")[0];
// If we have it and it has its document...
if (frame && frame.contentDocument && frame.contentWindow) {
// Inject jQuery into it if we haven't
jqFrame = frame.contentWindow.jQuery;
if (!jqFrame) {
$("script[src*=jquery]").clone().appendTo(frame.contentWindow);
} else {
// We have, hook up a ready handler
jqFrame(frame.contentDocument).ready(function() {
// Fire the click
jqFrame("#btnHangup").click();
});
// Done
return;
}
}
// If we get here, we haven't hooked up the ready handler,
// so try again in a moment
setTimeout(tryClick, 10);
}
});
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<html>
<frameset frameborder="1" rows="50%, *">
<frame src="page1.html" />
<frame src="page2.html"/>
</frameset>
</html>
page1.html code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails">
<th>Result Details</th>
<tr>
<td>Row 1</td>
<div id="r1">
<p> R1 data</p>
</div>
</tr>
</table>
</body>
</html>
And Page2.html code
<html>
<body>
<div id="myDiv">
<p> Testing.... </p>
</div>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table tr').on('click', function () {
$('#r1').load('page2.html#myDiv');
});
});
With this code, on click on table row, i am able to display the "myDiv" content in "r1". But I want reverse behavior. i.e., on clicking row, content of div "r1" of page1 should be displayed in div "myDiv" of page2.
I tried $('page2.html#myDiv').html('#r1'); but no success.
Any thoughts
If possible change the frames to iframes. You are then able to access the elements in each of the iframes by using the .contents() function assuming the two iframes are on the same domain.
You would then do something like the following.
main.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<iframe id="page_1" src="page1.html"></iframe>
<iframe id="page_2" src="page2.html"></iframe>
</html>
page1.html
<html>
<body>
<table id="resultDetails">
<th>Result Details</th>
<tr>
<td>Row 1</td>
<div id="r1">
<p> R1 data</p>
</div>
</tr>
</table>
</body>
</html>
page2.html
<html>
<body>
<div id="myDiv">
<p> Testing.... </p>
</div>
</body>
</html>
myjs.js
$(window).on('load',function () {
$('#page_1').contents().bind('click','tr', function () {
$('#page_2').contents().find('#myDiv').html($('#page_1').contents().find('#r1').html())
});
});
I have two iframes in the document movie.htm:
<iframe id='movies' class='top' frameborder='0'></iframe>
and
<iframe src="moviesearch.htm" class="bottom" frameborder="0">
Within moviesearch.htm there is an input tag
<input id="search_str" type="text">
I was wondering how I access this value (contained in moviesearch.htm) using JavaScript in the document movie.htm.
As the user is typing the field continuously it would require that the value be updated real-time within movie.htm.
How would I achieve this in JavaScript?
If both pages are in the same domain, you'll be able to iframe.contentDocument. https://developer.mozilla.org/en/XUL/iframe#p-contentDocument
postMessage.
https://developer.mozilla.org/en/DOM/window.postMessage
movie.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>
</body>
<script>
window.addEventListener
("message", function(e) {
document.getElementById("updatedvalue").innerHTML = e.data;
}, true);
</script>
</html>
moviesearch.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
window.parent.postMessage(message, "*");
}
</script>
</html>