In this example, alert is blank;
I want to read the location of iFrame, I am using object.src for this but it work only if I set its src attribute. But I set iFrame's location using window.open method and in this case it is not working. What I do ?
<body>
<iframe id="location" name="address" style="width:700px; height:700px;">
</iframe>
<script type="text/javascript" language="javascript">
window.open("http://www.google.com","address");
function clickMe()
{
var src = document.getElementBy Id("location").src;
alert(src);
}
</script>
<input type="button" onclick="clickMe()" value="click Me"/>
</body>
Instead of using window.open(), why don't you just use:
document.getElementById("location").src = "http://www.google.com";
Now you can get its location using getElementById()
You can do that by accessing the location.href attribute. Of course, for security reasons, browsers won't let you access the iframe's DOM if it's another domain.
var oIframe = document.getElementById("location");
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
alert(oDoc.location.href);
Same security issue if you access via the handle which should work in the same domain
<script>
var win;
function load(link) {
win=window.open(link.href,link.target)
return win?false:true;
}
function tell(winName) {
try {
alert(win.location.href)
try {
var handle = window.open('',winName);
alert(handle.location.href)
}
catch(e) {
alert('oops getting location via window handle:'+e.message)
}
}
catch(e) {
alert('Ooops getting location:'+e.message)
}
}
</script>
<iframe src="about:blank" name="if1"></iframe><br/>
Load foreign link<br />
Load local link<br />
Tell<br />
Related
I'm trying to integrate authorize.net accept hosted page using the iframe approach in SAP Hybris. The iframe is supposed to send back a response when the showReceipt is set to false according to the documentation. But as of now it seems to be stuck after pay button is clicked.
I have been trying the approach in the documentation. Then tried out the solution in How to implement Authorize.NET Hosted Payments iFrame & Laravel .
This is the hostedOrderPage which is where the iframe displays:
<script type="text/javascript">
$(document).ready(function(){
window.CommunicationHandler = {};
function parseQueryString(str) {
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
vars[pair[0]] = unescape(pair[1]);
}
return vars;
}
window.CommunicationHandler.onReceiveCommunication = function (argument) {
console.log('communication handler enter');
var params = parseQueryString(argument.qstr)
switch(params['action']){
case "cancel" :
console.log('cancel'); break;
case "transactResponse" :
console.log("transaction response received");
console.log(transResponse.totalAmount);
}
}
//send the token
$('#send_hptoken').submit();
});
</script>
<div id="item_container_holder">
<div class="item_container">
<div id="iframe_holder" class="center-block" style="width:90%;max-width: 1000px" data-mediator="payment-form-loader">
<iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="750" height="900" frameborder="0" scrolling="no">
</iframe>
<form:form id="send_hptoken" action="https://test.authorize.net/payment/payment" method="post" target="load_payment">
<input type="hidden" name="token" value="${token}" />
</form:form>
</div>
</div>
</div>
This is the iframecommunicator:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IFrame Communicator</title>
<script type="text/javascript">
function callParentFunction(str) {
if (str && str.length > 0 && window.parent.parent
&& window.parent.parent.CommunicationHandler && window.parent.parent.CommunicationHandler.onReceiveCommunication) {
var referrer = document.referrer;
window.parent.parent.CommunicationHandler.onReceiveCommunication({qstr : str , parent : referrer});
}
}
function receiveMessage(event) {
if (event && event.data) {
callParentFunction(event.data);
}
}
if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
}
if (window.location.hash && window.location.hash.length > 1) {
callParentFunction(window.location.hash.substring(1));
}
</script>
</head>
<body></body>
</html>
It seems nothing is logged into the console. If there is a response coming it should enter the switch case 'transactResponse' in the hostedOrderPage and log it to the console.
I had a similar problem. Make sure Test Mode is off on the Sandbox account first. Also I believe I had to add Content-Security-Policy for all the related domains plus frame-ancestors 'self' to the Header of the form. I build a string for the local domain and the remote domain, in my case it was test.authorize.net, and add that as a attribute. I build the forms dynamically.
See this link at the Dev forms for more information about the CSC issue.
I have a HTML file named test.html and below are the content of that file.
<html>
<head></head>
<body>
This is the content.
</body>
</html>
Now I have another file where I want to show the test.html content by iframe and then match the content with something and do something if it matches.
Here is what I'm trying but I'm not getting the iframe data.
<html>
<head></head>
<body>
<iframe id="myIframe" src="test.html"></iframe>
<script>
var iframe = document.getElementById("myIframe");
var iframe_content = iframe.contentDocument.body.innerHTML;
var content = iframe_content;
// var content = "This is the content."; --> I want to get the iframe data here like this. Then match it with the following.
var find = content.match(/ is /);
if (find) {
document.write("Match Found");
} else {
document.write("No Match!");
}
</script>
</body>
</html>
Thanks in advance
As stated in the comments, you need to wait for the iframe content to load. https://developer.mozilla.org/en-US/docs/Web/Events/load
<iframe id="myIframe" src="https://stackoverflow.com/questions/45525117/get-iframe-content-by-using-javascript#"></iframe>
<script>
const myFrame = document.getElementById('myIframe');
myFrame.addEventListener('load', (evt) => {
console.log(evt.target === myFrame);
console.log(evt.target);
});
</script>
Nothing will work unless your web page and iframe have the same origin
how can I run Function in original page from window.open
original_page.html
<div id="Processing" style="display:none;">
<button onclick="window.open("Processing_window.html")">open</button>
</div>
<script language="JavaScript">
function submit_form() {
var upgradeForm = document.getElementById('upgradeForm');
setTimeout("upgradeForm.submit()",3000);
}
</script>
========
Processing_window.html
<script language="JavaScript">
function Processing_window() {
var doc = window.opener.document, Processing = doc.getElementById("Processing");
Processing.style = '';
submit_form(); //Here the problem
window.close();
}
setTimeout ("Processing_window()",5000);
</script>
========
I went to run "submit_form();" funcion from Processing_window.html
To access functions from the opener, use window.opener.functionName, assuming both are in the same domain.
function Processing_window() {
var doc = window.opener.document, Processing = doc.getElementById("Processing");
Processing.style = '';
// Here's the solution
window.opener.submit_form();
window.close();
}
setTimeout ("Processing_window()",5000);
You need to HTML encode the quotation marks in the code in the attribute, or use apostrophes:
<button onclick="window.open('Processing_window.html')">open</button>
As long as the page that you open has the same origin (same server, same protocol), you can use the opener property to access the parent windows window object. There's where you find the reference to the function:
window.opener.submit_form();
You can, but not cross-domain. Only in the same domain.
<script>
function new_win_fun() {
var wind = window.open("Processing_window.html");
var upgradeForm = wind.document.getElementById("upgradeForm");
wind.setTimeout("upgradeForm.submit()",3000);
}
</script>
<button onclick="new_win_func()">Run</button>
I have the below script and noscript javascript codes:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LfWqtgSAAAAAP1KwYFYGt0wDeJFtxznmqyRH_Q5"> </script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=6LfWqtgSAAAAAP1KwYFYGt0wDeJFtxznmqyRH_Q5"
height="300" width="500" frameborder="0"></iframe>
<br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
The above codes should be added to the page body only and only when a javascript variable is set from the server.
var shouldShow = true;
$document.ready(function() {
if (shouldShow) {
// add
} else {
// don't add
}
});
How would that possible to add those scripts at runtime?
Thanks,
You can use Page.RegisterStartupScript
if (shouldShow) {
Page.RegisterStartupScript...
}
You can do that like this:
var shouldShow = true;
$document.ready(function() {
if (shouldShow) {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'https://www.google.com/recaptcha/api/challenge?k=6LfWqtgSAAAAAP1KwYFYGt0wDeJFtxznmqyRH_Q5';
document.body.appendChild(newScript);
} else { ... }
And you can freely ignore noscript. As it is shown only if there is no JS enabled, but in that case it will not be added anyway.
But why not simply place it into some asp:panel, for instance, and set its visibility to true/false depending on if it should be shown or not? If some asp.net element has elem.Visibility = false it is not sent to browser, the same as all its content.
I have my website
www.aplicatii-iphone.ro
and another
page.html on localhost
<html>
<head>
<title>Object References across Iframes</title>
<script type="text/javascript">
window.onload = function(){
var form = document.getElementById('testForm');
form.testBtn.onclick = sendData;
}
function notify() {
//alert('iframe loaded');
var iframeEl = document.getElementById('ifrm');
if ( iframeEl && iframeEl.parentNode && document.createElement ) {
var newTxt = document.createTextNode('The iframe has loaded and your browser supports it\'s onload attribute.');
var newPara = document.createElement("p");
newPara.className = 'demo';
newPara.appendChild(newTxt);
iframeEl.parentNode.insertBefore(newPara, iframeEl);
}
}
function sendData() { // to form inside iframed document
// frames array method:
// window.frames['ifrm'].document.forms['ifrmTest'].elements['display'].value = this.form.testEntry.value;
var ifrm = document.getElementById('ifrm');
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('search-input'); // <------<< search input
form.display.value = this.form.testEntry.value;
form.submit();
}
// test in iframed doc
var counter = 0;
</script>
</head>
<body>
<form id="testForm" action="#">
<p><input type="text" name="testEntry" size="30" value="[enter something]" /> <input name="testBtn" type="button" value="Click Me" /></p>
</form>
<iframe name="ifrm" id="ifrm" src="http://www.aplicatii-iphone.ro" onload="notify()" width="900">Sorry, your browser doesn't support iframes.</iframe>
</body>
</html>
And every time I press the button Click Me, I want that the state of www.aplicatii-iphone.ro to be like a user searched for that value written in "testEntry" from outside of the iframe.
I tried something there ... but I can't figure it out ... any help please?
I took the example from here http://www.dyn-web.com/tutorials/iframes/refs.php
If you know you're using a modern browser, you could use postMessage to communicate between the frames. Here's a good write-up: http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage
If you need to support legacy browsers, you could use Google Closure's CrossPageChannel object to communicate between frames.
Unfortunatly, this is not possible due to the Same orgin policy.
And changing the document.domain-value only helps if you try to connect a subdomain with the main-domain.
Edit
If you avoid the same-orgin-problem by using a page on the same website, this should work for you:
window.frames['ifrm'].document.getElementById("search-input").value = document.getElementsByName("testEntry")[0].value;
window.frames['ifrm'].document.getElementById("cse-search-box").submit();