Good Day!
is it possible when i open new window from parent window, a javascript will execute on the new WINDOW?
Like for example if the new window completely load, a textfield will change a value.
Thanks
get the parameter from new window onLoad() event to parent window, notifying that new window has been load.
I hope this will solve your question.
Here's an example for putting a function in a child window then let the child window runs it. The showTitle function will simply show the current document title. The child page will wait for a specific function and calls it when it arrives.
parent.html:
<html>
<head>
<title>parent</title>
</head>
<body>
<script>
function showTitle() {
alert('Page Title = '+this.document.title);
}
function childLoaded() {
showTitle();
var childWnd=document.getElementById('fchild').contentWindow;
if (!childWnd) return;
childWnd.newFunc=showTitle;
}
</script>
parent<br />
<iframe id=fchild src="child.html" width=300 height=300 onload="childLoaded()"></iframe>
</body>
</html>
child.html:
<html>
<head>
<title>child</title>
</head>
<body>
<script>
var waiter,newFunc=null;
function waitFunc() {
if (newFunc) {
clearInterval(waiter);
newFunc();
}
}
waiter=setInterval(waitFunc, 1000);
</script>
child
</body>
</html>
Related
I have a site, which takes a html code block from the user, for the site time.is and then is supposed to show that later. The code is taken as a JavaScript Prompt and the stored in the local storage
let timeislink= prompt("Please enter the code as it is, with no spaces, or your clock might break");
localStorage.setItem("timeisperslink", timeislink);
And for adding it to the div, I take the local storage value, and store it in a variable and try to pass that under the .innerHTML function, but that doesn't seem to be working
function changetime(){
let timedivneed= document.getElementById('timeisdynmdiv')
let usetimeis= localStorage.getItem("timeisperslink")
timedivneed.innerHTML+= usetimeis;
}
Any help is appreciated
Edit:- #HTML of the page in which div has to be changed#
<!DOCTYPE html>
<html lang="en">
<body onload="myFunction()">
<h2 id="timewish" onload="changetime()"></h2>
<div id="timeisdynmdiv">
</div>
</body>
</html>
Have removed unwanted things
What I think is that your script block is not located anywhere in the HTML. For best results, add your script block after the <div>. So:
<!DOCTYPE html>
<html lang="en">
<body onload="myFunction()">
<h2 id="timewish" onload="changetime()"></h2>
<div id="timeisdynmdiv">
</div>
<script>
window.onload = function(){
let timeislink= prompt("Please enter the code as it is, with no spaces, or your clock might break");
localStorage.setItem("timeisperslink", timeislink);
}
function changetime(){
let timedivneed= document.getElementById('timeisdynmdiv')
let usetimeis= localStorage.getItem("timeisperslink")
timedivneed.innerHTML+= usetimeis;
}
</script>
</body>
</html>
Tell me if this doesn't work for you and I'll try to fix it.
Use window load event and put your logic to get localStorage data.
// Test mock to set data in localstorage
document.onreadystatechange = function(e) {
if (document.readyState === 'complete') {
console.log("readyState");
localStorage.setItem("timeisperslink", "test data description");
}
};
window.addEventListener('load', (event) => {
console.log("loaded");
let timedivneed = document.getElementById('timeisdynmdiv')
let usetimeis = localStorage.getItem("timeisperslink")
timedivneed.innerHTML += usetimeis;
});
Is there any way possible to load a Google Translate widget in the sidebar and one in the footer, for example.
Every way I've tried has only loaded so that both appear in the location of the first instance on the page.
After a bit of tinkering I kinda felt obligated to solve the puzzle! You can skip to the good part by checking out the jsfiddle: (it works as of now but knowing google it might not tomorrow)
http://jsfiddle.net/melfy/15zr6ov0/
Lets begin:
First google translate is loaded and adds a listener for a select box it adds to the DOM after you call the right element but we need that change event to call a change for a select box we're going to clone from the original one to get google to update the translation, this gets a bit messy as we over take the prototype (which is usually bad practice)
Start by adding your header element:
<div id="google_translate_element"></div>
Then we add our footer element:
<div id="google_translate_element2"></div>
Next we pull in the google translator
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Now we get to the good part:
<script type="text/javascript">
// store google translate's change event
trackChange = null;
pageDelayed = 3000;
// overwrite prototype to snoop, reset after we find it (keep this right before translate init)
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
reset = false;
// filter out first change event
if (a == 'change'){
trackChange = b;
reset = true;
}
if(c==undefined)
c=false;
this._addEventListener(a,b,c);
if(!this.eventListenerList)
this.eventListenerList = {};
if(!this.eventListenerList[a])
this.eventListenerList[a] = [];
this.eventListenerList[a].push({listener:b,useCapture:c});
if (reset){
Element.prototype.addEventListener = Element.prototype._addEventListener;
}
};
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
let first = $('#google_translate_element');
let second = $('#google_translate_element2');
let nowChanging = false;
// we need to let it load, since it'll be in footer a small delay shouldn't be a problem
setTimeout(function(){
select = first.find('select');
// lets clone the translate select
second.html(first.clone());
second.find('select').val(select.val());
// add our own event change
first.find('select').on('change', function(event){
if (nowChanging == false){
second.find('select').val($(this).val());
}
return true;
});
second.find('select').on('change', function(event){
if (nowChanging){
return;
}
nowChanging = true;
first.find('select').val($(this).val());
trackChange();
// give this some timeout incase changing events try to hit each other
setTimeout(function(){
nowChanging = false;
}, 1000);
});
}, pageDelayed);
}
</script>
You can change the pageDelayed variable to trigger quicker or slower but if it's in your footer, bumping it up to delay longer may help it work more efficiently depending on your page load
Unfortunately, you can not have the widget be loaded more than once in a single page. Google just doesn't allow for that. One potential workaround would be putting the code in an iFrame and then putting two iFrames onto your webpage.
Create a file called iframe.html
<html>
<head>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</head>
<body>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
</body>
</head>
</html>
In your other file put code something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Google Translate</title>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?b=googleTranslateElementInit"></script>
</head>
<body>
<div id="header" style="background-color: red;">
<iframe src="iframe.html"></iframe>
<strong>A</strong>
</div>
<div id="footer" style="background-color: blue;">
<iframe src="iframe.html"></iframe>
<strong>B</strong>
</div>
</body>
</html>
I got a stuck in this piece of code
The full code
<html>
<head>
<script>
function hide(kaka){
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
}
function remove(kaka){
var temp=document.getElementById(kaka).display;
temp=(temp=='block')?'none':'block';
}
</script>
</head>
<body>
<IFRAME id="kaka" SRC="ads.php" WIDTH=10000 HEIGHT=10000></IFRAME>
<script>
</body>
I'm trying to make the iframe to hide after someone's click
visibility and display are just text strings, so setting them to a variable, and then changing the variable, won't change the element.
function toggle(kaka) {
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
document.getElementById(kaka).visibility=temp;
}
In my test, given 2 document, A and B. In A document, there is an iframe, the iframe source is B document. My question is how to modify B document certain scope of variable?
Here is my code: A document
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<script type='text/javascript' src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src="js/angular1.0.2.min.js"></script>
<script>
var g ;
function test($scope,$http,$compile)
{
$scope.tryget = function(){
var iframeContentWindow = $("#iframe")[0].contentWindow;
var iframeDOM = $("#iframe")[0].contentWindow.document;
var target = $(iframeDOM).find("#test2");
var iframeAngular = iframeContentWindow.angular;
var iframeScope = iframeAngular.element("#test2").scope();
iframeScope.parentcall();
iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ;
iframeScope.tempvalue = 66;
iframeContentWindow.tt = 22;
iframeScope.parentcall();
console.log(iframeScope.tempvalue);
console.log(angular.element("#cont").scope());
}
}
</script>
</head>
<body>
<div ng-controller="test">
<div id="cont" >
<button ng-click="tryget()">try</button>
</div>
</div>
<iframe src="test2.html" id="iframe"></iframe>
</body>
</html>
My B document:
<!doctype html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<script type='text/javascript' src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src="js/angular1.0.2.min.js"></script>
<script>
var tt =11;
function test2($scope,$http,$compile)
{
console.log("test2 controller initialize");
$scope.tempvalue=0;
$scope.parentcall = function()
{
$scope.tempvalue = 99 ;
console.log($scope.tempvalue);
console.log(tt);
}
}
</script>
</head>
<body>
<div ng-controller="test2" id="test2">
<div id="cont" >
<button ng-click="parentcall()">get script</button>
</div>
{{tempvalue}}
</div>
</body>
</html>
Note: Actually there is some way to do it, which i feel it like a hack instead of proper way to get it done:
that is create a button in b Document, and then bind with angularjs ng-click. After that A document jquery "trigger" click on button.
To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they are both in the same domain, with access to the angular scope, try following those steps:
*You don’t need the parent to have reference to angularJS library…
Calling to child iFrame from parent
1.Get child iFrame element from the parent (link to answer):
document.getElementById("myIframe").contentWindow
2.Access the scope of the element:
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope()
3.Call the scope’s function or property:
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope().someAngularFunction(data);
4.Call $scope.$apply after running the logic of the function/updating the property (link to Mishko’s answer):
$scope.$apply(function () { });
Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example)
Calling parent from child iFrame
Calling the parent function:
parent.someChildsFunction();
Will update also on how to do it cross domain if it is necessary..
You should be able to get parent scope from iFrame:
var parentScope = $window.parent.angular.element($window.frameElement).scope();
Then you can call parent method or change parent variable( but remember to call parentScope.$apply to sync the changes)
Tested on Angular 1.3.4
The best way in my mind to communicate with the iframe is using window.top. If you want your iframe to get your parent's scope, you can set window.scopeToShare = $scope; within your controller and it becomes accessible for the iframe page at window.top.scopeToShare.
If you want your parent to get the iframe scope, you can use
window.receiveScope = function(scope) {
scope.$on('event', function() {
/* Treat the event */
}
};
and within the iframe controller call window.top.giveRootScope($rootScope);
WARNING: If you are using this controller multiple times, make sure to use an additional ID to identify which scope you want.
This one is quite simple and works for me:
in the controller code of iframe page:
$window.parent.window.updatedata($scope.data);
in the parent page controller code:
window.updatedata = function (data) {
$scope.$apply(function () {
$scope.data = data
}
}
I'm trying to change the size of my window onload. It doesn't seem to work.
Here is the setup:
<script>
var w=800;
var h=600;
function changeScreenSize(w,h)
{
window.resizeTo(w,h)
}
</script>
<body onload="changeScreenSize(w,h)" style="background-image:url(Untitled.jpg)">
This solution is from php.org (somewhere) - works for windows DOM, Mac cracks.
Hide menubar and favs, percent (width,height) gets complicated:
http://css-tricks.com/snippets/html/top-bottom-halves-layout/
<script>
function changeScreenSize(w,h)
{
window.resizeTo( w,h )
}
</script>
</head>
<body onload="changeScreenSize(1200,260)">
http://ysdn2005-w11.wikispaces.com/Change+Browser+Window+Size+Upon+Loading
Yep, this page details method. Script above works.
function changeScreenSize()
{
w=window.open('','', 'width=800,height=600');
w.focus();
}
<body onload="changeScreenSize()">