Unable to access parent popup div element using javascript - javascript

I've been working on this little script where the translated text is supposed to return in its original position. Everything seems fine, but the js is still unable to find the window object. Is there anything wrong in code? I have tried newXWin.document too, but no use. Please assist.
<?php
?>
<html>
<head>
<script>
function DoMagic()
{
var newWin = window.open("https://translate.google.com/#auto/es/This%20is%20a%20test%20sentence.%0AI%20think%20I%20should%20try%20this.","newXWin","width=500,height=600");
}
function GetText()
{
alert(window.opener.document.getElementById("result_box").innerHTML + "");
}
</script>
</head>
<body>
<div id='toDiv'></div>
<a href='#' onclick='javascript:DoMagic();'>Get Page</a>
<a href='#' onclick='javascript:GetText();'>Get Contents!</a>
</body>
</html>

Related

How can I move to another page (exporting variables) in Framework7?

I'm developing a web app with Framework7. I'd like to move to another page when clicking a link, exporting a variable.
In index.php I have this:
<head>
<script type="text/javascript">
function myFunc(xyz) {
localStorage.setItem("variable", xyz);
}
</script>
</head>
<body>
<?php
foreach( [...] ) {
[...] // something not important
print('
<a onclick="myFunc('.$myVar.')" href="anotherPage.php">'.$myVar.'</a>
');
}
?>
</body>
In anotherPage.php I have this:
<p id="example"></p>
<script>
document.getElementById("example").innerHTML = localStorage.getItem("variable");
</script>
I don't know why it does not work... Can you help me?
P.S.:
I found this that may be useful: Ajax pages | Framework7
Thank you so much!
F7 is a SPA framework, it loads the new page without JS.
You should add a pageInit callback in you index.php
<a href="anotherPage.php?variable=xyz"/>
<script type="text/javascript">
myApp.onPageInit('another-page', function (page) {
// here is the variable
console.log(page.query.variable);
});
</script>
anotherPage.php should be formatted like this
<div class="navbar">
</div>
<div class="page" data-page="another-page">
...
</div>
There is another way to pass the variable by 'query' object.
https://framework7.io/docs/router-api.html
mainView.router.load({
url: "anotherPage.php",
query: {
variable: 'xyz',
...
}
});

How to delay the load of an <a> tag in javascript/html

I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad

Dynamically changing <DIV> using jquery fails

I have created two simple pages as a test.
The first, PIG_TEST.htm, outputs a simple page containing 3 <DIV> sections; Header, Menu and Main.
The Menu section contains a link which, when selected should load the second page, PIG_TEST_1-php, into the <DIV> with the id of 'mainx', on the main page via a jquery click function.
However, when selected it just replaces the original page.
Seems like it is not finding or seeing the "mainx" div.
<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
<div style='background-color:#6495ed; height: 110px;'>
<div class='col-md-12 text-center'>Header TEST PAGE
</div>
</div>
<div style='background-color:#ffaaaa; height: 150px;'>
<div class='col-md-12 text-center'>Menu TEST PAGE
<ul>
<li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
</ul>
</div>
</div>
<div id='mainx' style='background-color:#cccccc; height: 300px;'>
Main TEST PAGE
</div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>
The PIG_TEST_1.php is:
<?php
echo "<body>";
echo " THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>
I've tried putting the call to "jquery-1.8.0.min.js" just after the <body> but it stll fails.
Sorry, I'm new to jquery, any help would be appreciated.
You should move the jquery <script> tag outside of the other one (you have it nested), and you also need a $ symbol before (document).ready:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
There are lot of problems with your code!
<script> cannot be contained inside another <script> tag.
Load jQuery before calling the function.
Add $ before (document).
So your code should be:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>

how to send the parameter to the javascript function in HTML?

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>

Calling Parent Page JavaScript Function In An Iframe

I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow

Categories