I want to know how we can open a web page in edit mode within an HTML page.
I mean, suppose if I have two frames. when I enter a url in a text in top frame, I should get the page in edit mode in bottom page. I should be able to select the items in the page in that mode. I don't want to save the items, but should be able to switch to the normal mode in a button click.
This is for getting Id/name/xpath of the elements in that page. if there are controls in a page which will navigate to other pages while clicking, I wouldn't be able to detect these parameters. If I am overriding all the click events, the controls under javascript tabs/accradian, will not be accessible.
Is there any ways to do it?
I coded as per one of the answer, but it is not working.
<!doctype html>
<html>
<head>
<title>click demo</title>
<script type="text/javascript">
function myFunc() {
doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.designMode = "on";
}
</script>
</head>
<body>
<input type="text" id="text" value="http://www.google.com" />
<input type="button" onclick="myFunc()" value="Open" /><br /><br />
<iframe id="ifrm" src="http://www.example.com" width="100%" height="500px" ></iframe>
</body>
</html>
you can convert any frame to design mode
iframe_node.contentDocument.designMode = "on";
Related
I am using a third party software which uses the Prototype library. It was working fine before the latest update (Ver 68 and above) of Firefox. It is still working in the other browsers. I tried debugging and whenever I introduce a breakpoint and go step by step the code works. I found the following line of code which if I step over and let the code run the problem is solved. But if I let the code run before this the problem occurs.
return formView.submit();
Any idea? I am ok with a hack even.
Update:
I created a MRE as suggested. Here is the link https://brandsoftinfotech.com/test/firefox-frame-submit/
I have created 2 forms, one in the parent page and one in the frame. On submitting the parent page form the frame page form gets submitted and writes the data in a log file. And the form page when submitted just shows the data from that log file.
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
}
</script>
</head>
<body>
<form action="index-submit.php" onSubmit="submitFunction()">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
frame-box.html
<form action="frame-submit.php" id="myForm">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
</form>
This works fine on Chrome, MS Edge but doesn't work on Firefox.
I am not sure if solving this would solve my problem, but at least this should work for my library code to work.
I'm mildly surprised to see that it works on any browser. By allowing the parent's form submission to occur, you're tearing down the page, which means tearing down the iframe, and any requests that may be underway can be aborted (or if not quite started, never started).
I'd probably switch to ajax rather than doing the actual form submission.
But if you want to do the form submission, to do this reliably you'll have to wait for the frame's submission to complete before doing the parent submission. The easy way to do that is to have the frame submission respond with a small page with JavaScript on it that tells the parent it's finish:
<!DOCTYPE html>
<html>
<body>
<script>
if (parent && parent.formCallback) {
parent.formCallback();
}
</script>
</body>
</html>
Then the parent page is something like:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
return false; // <−−−−−−−− cancel submission
}
function formCallback() { //
document.getElementById("parentForm").submit(); // <−−−−−−−− Submit on callback
} //
</script>
</head>
<body>
<!-- vvvvvvvvvvvvvvv−−−−−−−− Added ID -->
<form id="parentForm" action="/index-submit" onSubmit="return submitFunction()">
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
But you may get away with just detecting the change in location in the iframe. That would involve just changing the parent page as indicated:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction(form) { // <−−−−−−−− Added parameter
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
// Wait for the location of the iframe window to change
setInterval(function() {
if (String(myFrame.contentWindow.location).includes("frame-submit")) {
// Frame's form submitted, we can submit ours
form.submit();
}
}, 100);
return false; // <−−−−−−−− cancel submission
}
</script>
</head>
<body>
<form action="/index-submit" onSubmit="return submitFunction(this)">
<!-- ^^^^−−−−−−−−− added argument -->
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
I wouldn't expect that to work if the form in the frame does a significant upload (though I could be wrong about that).
Hey I am new to php and other stuffs. Now I am trying to make automatic bill creating page. But the problem is the background is not visible in print preview.
When I press the print button on the top left corner of the php page it shows a page without background image, at the same time I don't need print button in the print preview page. If I use <img> tag to insert image I can't able to display datas above the image.
My code
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
window.print();
}
</script>
</head>
<body background="Geekay.jpg">
<input type="button" value="Print" onclick="printpage();">
<br><br>
<br><br>
<br><br>
Datas....
</body>
</html>
For printing datas along with background image in print window click more settings (in case of google chrome). Then check background graphics. For not showing print button, I updated my code as given below
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
document.getElementById('print').style.display = 'none';
window.print();
}
</script>
</head>
<form name="bill">
<body background="Geekay1.JPG">
<div id="print" style="display:block">
<input type="button" value="Print" onclick="printpage()">
</div>
<br><br>
<br><br>
<br><br>
Datas....
</body>
</form>
</html>
Right what I want to do is, display a username and password on the top of a page so you can enter it and than continue on as normal. (I don't care if it stays or breaks out of the iframe at this point)
A number of people log in the same account for teachial details, So currently we have a html page with the user name and password as well as a link to the log in page. I have tried just passing the varibles onto the login page but that a no go sadly.
To add insult to injury this has to be done in html, because it all run from a network drive (I know it a pile of crap on crap it is not mine, nothing I can do about it)
Currently I can stopped the login pages jumping out of the iframe, but then of course you can't login. Any ideas or is it impossible with the limitations in place?
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Username: <b>******</b></p>
<p>Password: <b>******</b></p>
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" name="Embedded Frame" src="LINK" height="100%" width="100%"></iframe>
<body>
</html>
Edit: I should add that I have no control over the login pages they are run my a number of different people across the world. I be happy with just displaying the user name and password so it can be easily copied in to the field
First of all your end tag needs to be like this
Also try this instead of your code! :)
:
<html>
<head>
<title>Test</title>
<script type="text/javaScript">
function True/False() { //what youwant to do put it in here in javascript form:) try an if statement it should work if not use a switch!
}
function Input1() {
//Connect to whatever value you want it to load on.
}
function Input()
{
//password value goes here
}
</script>
</head>
<body>
<br>
<br>
<center>
<div id="Input1()">
<input type="Username" value="" />
</div>
<br>
<div id="Input2()">
<input type="Password" Value="" />
</div>
<!-- in the onclick make a function for it to load-->
<div id="True/False()">
<input type="button" type="button" value="login" onclick="" />
</div>
</center>
<!-- you need to make this a function of True/false and tell it to load when to load. This is an error frame lol.
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" name="Embedded Frame" src="LINK" height="100%" width="100%"></iframe>
-->
</body>
</html>
Im using this code to demonstrate the concept on same domains:
Parent:
<html>
<body>
<form>
<input id="details" name="details">
<input type="button" name="choice" onClick="window.open('http://domainB.com/popuppage.html','popuppage','width=850,toolbar=1,resizable=1,scrollbars=yes,height=700,top=100,left=100');" value="Open popup">
</form>
</body>
</html>
And the popup file:
<html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function sendValue (s){
var selvalue = s.value;
window.opener.document.getElementById('details').value = selvalue;
window.close();
}
// End -->
</script>
<form name="selectform">
<input name="details" value="">
<input type=button value="Copy input to parent opener" onClick="sendValue(this.form.details);">
</form>
</body>
</html>
This works great, but because the popup make a modification of the content of the parent page window.opener.document.getElementById('details').value = selvalue; this will not work on a crossdomain example for security reasons. I dont want to modify content on parent, i just want to communicate a value to the parent script, so i need a listener script on parent to attend for information sent from the popup on close. Is this possible? alternatives?
As Passerby suggested, postMessage (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) is the ideal solution for what you want to do. Because it doesn't work on older browsers, you'll either have to limit your stuff to newer browsers or employ hacks with iframes and the like to achieve cross-domain communication.
You could run easyXDM in the popup and have it load domainA.com in an iframe, then from that iframe you should be able to access and manipulate the other page on domainA.com that initiated the popup.
I have two level parent-child iframe hierarchy in my HTML pages. I want to get an object of parent window document in its child document for some manipulation. I works majorly with Google Chrome.
parent.document gives 'undefined' in Google Chrome, while in Mozilla it works fine. What's the catch?
For reference, please find below the content of the three files demonstrating the issue,
First file: 'one.html'
<html>
<head>
</head>
<body>
<input type="hidden" id="one_1" name="one_1" />
<iframe id="one" name="one" src="two.html">
</body>
</html>
Second file: 'two.html'
<html>
<head>
</head>
<body>
<input type="hidden" id="two_1" name="two_1" />
<iframe id="two" name="two" src="three.html">
</body>
</html>
Third file: 'three.html'
<html>
<head>
<script type="text/javascript">
function callme() {
alert(parent.document)
alert(top.document)
}
</script>
</head>
<body>
<input type="hidden" id="three_1" name="three_1" />
<button id="click" name="click" onclick="return callme()">Click Me</button>
</body>
</html>
Assuming that 'one.html' is opened with Google Chrome, when I click on the 'Click Me' button, two successive alert boxes appears with 'undefined' value. When I open 'one.html' in Mozilla, it gives two 'objectHTMLDocument' valued alert boxes appears.
Please find below the console messages while clicking on 'Click Me' button,
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/user/Desktop/two.html from frame with URL file:///C:/Users/user/Desktop/three.html. Domains, protocols and ports must match.
three.html:6
callme three.html:6
onclick three.html:13
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/user/Desktop/one.html from frame with URL file:///C:/Users/user/Desktop/three.html. Domains, protocols and ports must match.
three.html:7
callme three.html:7
onclick three.html:13
Thanks in advance.
I would inject from top-down as opposed to accessing bottom-up. I would set a variable in an iFrame by selecting it and storing it into a variable like so:
var frame = document.getElementById('one');
And then inject a reference to the parent:
frame.contentWindow.frame_parent_reference = window;
And then perform this in the next child iFrame replacing "one" with "two". That way, by third.html, we don't ask for parent or top, but can do the following:
alert(frame_parent_reference.document);
alert(frame_parent_reference.frame_parent_reference.document);
Perhaps not super elegant but it definitely gives you a lot of control (and you can check if the custom reference exists for security).
Good luck!