Close a (dialog box) iFrame from a button within the iFrame - javascript

I have two files, named main_page.html and dialog_box.html (see code below).
I want my handleCloseDialogButton() to "close the dialog box", in other words to reload main_page.html, with theFrame.style.display reset to "none".
How can I do this ? Should I use window.open("main_page.html") or window.location.href="main_page.html" or something else ?
Note: I do not want to use Javascript’s alert() function because its capabilities are not sufficient for what I need.
Contents of main_page.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleDialogButton()
{
var theFrame=document.getElementById("myDialogBox");
theFrame.style.display="block";
theFrame;
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. This is the main page.</h2></div>
<iframe id="myDialogBox" src="./dialog_box.html" style="display:none"> </iframe>
<input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box"
onClick="javascript:handleDialogButton();" />
</body>
</html>
Contents of dialog_box.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleCloseDialogButton()
{
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. I am the dialog box.</h2></div>
<input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box"
onClick="javascript:handleCloseDialogButton();" />
</body>
</html>

You can access parent elements from iframe by using window.parent.
See window.parent for details.
With window.parent you can either call parent js function or you can access parent element. Accessing parent element in your case should look like: window.parent.document.getElementById('myDialogBox');
Use this in your handleCloseDialogButton function and set its display to none:
function handleCloseDialogButton()
{
window.parent.document.getElementById('myDialogBox').style.display="none";
}
NOTE: This will not work in file mode in Chrome. You have to put your pages on web server, and than it will work in Chrome browser too.

Related

Redirect routes in HTML using Javascript

I have 3 html files that I want to link together. The three files are button.html, option1.html, option2.html and all three files are stored in one src folder.
The button.html is a simple webpage that contains two buttons:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
</body>
</html>
and the two other .HTML file are regular pages each w/ different content.
<!DOCTYPE html>
<html>
<head>
<title>Option 1/2</title>
</head>
<body>
// different data contained for option1.html and option2.html
<h1>Heading for Option 1 or 2</h1>
<p>Paragraph for Option 1 or 2</p>
</body>
</html>
I'm not sure what I'm doing wrong but even with the onClick() functions for each buttons, the buttons won't link to the other HTML files.
I'm wondering if I should have some kind of link tag in the header for the two HTML files. Also, I'm not very certain about that location.href line does in the script tag of button.html file. I just found some resources online to try this out.
Also, I need to do this using ONLY Vanila Javascript, HTML and CSS.
Please help me out. Thanks!!
UPDATED : This will work, I believe. See, first of all, always add your script tag just before the closing body tag. The reason is because that, the code will not work in case the DOM elements it looking for would not have been rendered.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function() {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function() {
location.href = "./option2.html";
};
</script>
</body>
</html>
You need add the script tag before closing body tag.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</body>
</html>
There is this thing called a same origin policy https://javascript.info/cross-window-communication#can-t-get-but-can-set which could be affected by location.href, if you are previewing the files in the local storage as opposed to a web server. Try changing it to location="./option.html" etc, removing the hrer
Alternatively you can make an invisible a tag, set the hrer, and click it with JS
var a=document.createElement("a");
a.href="option1.html";
a.click() ;
and put that in your onclick function instead,
EDIT another thing just realized
The script tags are in the head part of the html, but the buttons are in the body, so try copying the script tags to the bottom of the body tag, underneath the buttons, or surround both onclick functions with window.onload=function {/*other code goes here*/}

window.open() doesn't work correctly inside a JS function

I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content.
This is the code I wrote:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="updatesCtrl">
<span ng-repeat="x in updates">
● {{x.title}}
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js:
function updates(){
angular.module('myApp', []).controller('updatesCtrl', function($scope) {
$scope.updates = [
{title:"update1",update:"update1 content"},
{title:"update2",update:"update2 content"}
];
});
}
function showUpdate(title, update){
var win=window.open('updateWindow.html','newwindow','width=600, height=350');
win.document.getElementById("title").innerHTML=title;
win.document.getElementById("update").innerHTML=update;
return false;
}
updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page.
2. No change was made in the <h1> and the <p> of the updateWindow- although I wrote a script that was suppose to enter an html content to those places.
I don't understand why I didn't get what I expected with this code. Especially, I don't understand the first problem: if I only try to replace the onclick content inside index.html with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;" - I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem).
What is the problem with my code?
Try to use window.open('updateWindow.html','_blank','width=600, height=350'); instead
it looks to me that the window is not loading before you try to update html:
you can see that the html page has not even loaded yet and the dev tools says there is a Uncaught TypeError: Cannot set property 'innerHTML' of null try getting the new page to update it onloadin the update page.

How to access html elements in iframe inside html tag

I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>

Update parent from iframe using jquery

I have this minimal test case
a.html
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myinput">
<iframe id="frame" src="b.html" style="width:100%;height:100%" frameBorder="0"></iframe>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<body>
<script>
function update_parent(value) {
window.parent.document.getElementById('myinput').value=value;
}
</script>
<a class="tag" name="something" href="javascript:void(0)" onclick="update_parent(something)"/>Bla Bla</a>
</body>
</html>
The purpose here is to update the input box in parent window, when a button is clicked on the iframe. I tried to do it using plain javascript as you can see above, but it doesn't work either. I want to do this using jquery if possible.
function update_parent(value) {
$('#myinput', window.parent.document).val(value);
}
The second parameter for the $() wrapper is the context in which to search. This defaults to document so passing the parent sets the parent as the search context.
Your parent element would be window.self.top
You can access the contents or the document of the parent element.
Having said that, your code should look like:
$(window.self.top.document).find('#myinput');
This will give you the element in your parent.

window.parent.document working in firefox , but not in chrome and IE

My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
var frame_value = document.getElementById("framebox").value;
window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>
As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin.com/afazEDE/1
iframe.html: http://jsbin.com/ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html"></iframe>
<script>
window._fn = {
printval: function (response) {
$("input").val(response);
},
};
</script>
</body>
iframe
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox">
<input type="button" value="fill" onclick="PushValues()">
<script language="javascript">
function PushValues() {
window.parent._fn['printval']($('input').val());
}
</script>
</body>
</html>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer.
response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

Categories

Resources