Programmatically click link in iframe with Javascript - javascript

Here's my html/javascript. Below there are two if statements that I've tried. I used indexof to get the text between the <a></a> tags. Also tried href == to use the href= contents. Both do not work.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pb</title>
<script type="text/javascript">
function call() {
alert("Called!");
var allAnc = document.getElementById("d").contentDocument.getElementsByTagName("a");
for (var i = 0; i < allAnc.length; i++) {
if (allAnc[i].href.indexOf("Flag") > 0) {
alert("Found link by indexof, Trying to click!");
(allAnc[i]).click();
break;
}
if (allAnc[i].href == "javascript:flag.closeit()") {
alert("Found link by href, Trying to click!");
(allAnc[i]).click();
break;
}
}
}
</script>
</head>
<body>
<input id="Button1" type="button" onclick="call()" value="button" />
<iframe id="d" src="sourceurl.html" width="100%" height=700"></iframe>
</body>
</html>
Here is the link inside the iframe I am trying to click:
<a style="text-align: left;" href="javascript:flag.closeit()" title="Flag">Flag</a>

From your comment, you are loading the content of different domain into you iframe, so you just can't read the content of that domain due to same origin policy restrictions.

Here's a demo of the issue, code mostly copied & pasted from your question:
http://jsfiddle.net/colllin/G2BDb/
And the inner iframe code is here:
http://jsfiddle.net/colllin/wc8Up/
As you can see in the console when you click the button,
Refused to display 'https://www.google.com/#Flag' in a frame because
it set 'X-Frame-Options' to 'SAMEORIGIN'.
So it looks like if you have control over the page that the iframe is linking to, you could set X-Frame-Options header on that page to be specify an ALLOW-FROM uri (from MDN):
ALLOW-FROM uri
The page can only be displayed in a frame on the specified origin.
Alternatively if you have control over the original iframe source (which I assume you do, otherwise it's impossible to even access the contents, let alone click a link), you could add the target="_top" attribute to the link before clicking it. This would cause the linked page to replace your top-level page in the window.
Demo here: http://jsfiddle.net/colllin/G2BDb/2/

Related

Redirecting to another Google Script webapp after button click

I'm trying to redirect a google app script web app onto another app script after button click. I have tried the following:
<button onclick="myFunction()">Replace document</button>
<script>
function myFunction() {
location.replace("https://www.w3schools.com")
}
</script>
The error is that google script refused to connect. When checking inspect element, it says "X-Frame Options" to 'same-origin'.
Is there a work around on this?
I could use tags but how do I display it after an alert?
Issue:
Trying to load https://www.w3schools.com in a iframe: Note that your script is served in a sandboxed iframe of different origin by Google. The location here refers to the sandboxed iframe # https://*-script.googleusercontent.com hosted inside https://script.google.com. When you replace the location, you're replacing the inner sandboxed iframe with w3schools website. Now, w3schools doesn't want to be inside script.google.com or any other website. So, it set it's X-Frame Options to same-origin. Some websites are ok with this. They can be embedded. w3schools isn't one of them.
=============
|GASWebApp |<---script.google.com[Top Frame]
| |
|========= |
||SandBox| |
||User |<-|---- Where your html code is
||Frame | | (*.googleusercontent.com)
|========= | [Sandboxed iFrame]
| |
=============
Solution:
Load the web page in the top frame
Snippet:
window.top.location.replace("https://www.w3schools.com")
References:
Same origin policy
Location
Would something like this handle your use case?
var trigger = document.getElementById("trigger");
var link = document.getElementById("link");
trigger.addEventListener("click", showMessageAndThenShowLink);
function showMessageAndThenShowLink(){
alert("You are about to see the link");
link.style.display = "inline";
}
#link{ display: none; }
<button id="trigger">Show Message</button>
<br />
<a id="link" href="https://www.w3schools.com">www.w3schools.com</a>
Note: In an SO snippet, clicking the link gives a "refused connection" error, but it worked fine from my desktop.

Changing an iframe SRC dynamically

What I have and I need to do it work properly is when I'm in a "start page" and I click a button like this:
PAGE-1
Point A
It should send me to "another page" where I load dinamically an iframe taking each variable (shopID, type, max-levels and point) from the URL and print it like an iframe this way:
PAGE-2
<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>
I've used this javascript snippet but anyway, I can't make it work properly at all.
$(".map-button").click(function (e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr('data - iframe - src'));
});
I only need to get the variables from the data-iframe-src and use them in the iframe, but I'm not able... The problem is that I load elements in different pages, so I don't know how this affect to the URL variables.
I've founded a simple solution for my problem here and it works for me.
First of all I put this simple iframe in my PAGE-2:
<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>
Then in PAGE-1 I've used this type of links:
https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A
So now my PAGE-2 loads properly with these params in the URL. Then I've used this simple snippet in Javascript to fill my iframe in PAGE-2:
<script type="text/javascript">
$( document ).ready(function() {
$("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
});
</script>
And it works! Now I can go to PAGE-2 with all my params, pick them and use them in SRC inside the blank iframe.
Thanks for getting me in the correct path!

Embed (iframe or object) and Modify (jQuery) webpage

I'm simply trying to load another webpage in my webpage using the object tag or iframe. Then, I would like to remove some element of the loaded page with jQuery.
Here is my code
<div>
<object type="text/html" data="http://ebird.org/ebird/map/eurtre1" width="100%" height="400px" id="eurtre1">
</object>
</div>
<script>
jQuery( window ).load(function() {
jQuery('#map-sidebar').remove();
});
</script>
And, as you guess, it is not working...
I have tried:
jQuery('#eurtre1').contents().find('#map-sidebar')
and
jQuery('#eurtre1')[0].contentDocument.children
The wired thing is that on my browser, I can do it in the console, once I've selected the inside of the object...
Any idea ?
Here's a link to a similar question:
how to access an iframe and affect it with jQuery
Basically you can't due to Javascript same-origin policy but if you have access to the loaded content in the iframe you could use window.postMessage
You could also add a parameter to the iframe's src tag to post a message, something like this:
<iframe src="http://www.example.com?hideElement=true"></iframe>
Again you will have to have access the content of the iframe to check the param and execute your code.

how to change logo within an iframe depending on top URL of the window

I am trying to solve this problem since morning now. I want the an image file (logo) with an iframe to change depending on certain URLs. That is when the iframe is embedded inside a specific domain there is an internal logo and when it is embedded outside of the domain there is logo external. But I keep on getting this error SecurityError: Blocked a frame with origin from accessing a frame with origin Protocols, domains, and ports must match. I dont know how can I work around this? Is there an alternative way to do this?
here is my code
jQuery(document).ready(function($){
var currentUrl = window.parent.location.hostname;
if (currentUrl == 'www.mysite.com' || currentUrl == 'www.specific.com') {
$(function() {
$('img').remove('.logo-external');
});
} else {
$(function() {
$('img').remove('.logo-internal');
});
}
});
<div class="footer-right">
<a class="logo" href="" target="_blank">
<img class='logo-external' src="{{ ASSET_PATH }}logo-external.jpg" height="18" />
<img class='logo-internal' src="{{ ASSET_PATH }}logo.png" height="18" />
</a>
</div>
You can't use window.parent unless the iframe and its parent are on the same domain, or if the parent domain allows the child one to access it. That is only feasible if you have control over the parent server. However, there is a workaround:
Replace
var currentUrl = window.parent.location.hostname;
with
var temp = document.createElement("a");
temp.href = document.referrer;
var currentUrl = temp.hostname;
JS Fiddle demo using window.parent (not working)
JS Fiddle demo using document.referrer (does work)

Accessing element inside iFrame returning null

I have a form that posts to an iFrame. The website inside the iFrame is something I have no control over. However I would like to set the display of a few images inside the iframe to "none".
<form id="testForm" method="post" target="testFrame">
<input type="hidden" name="RequestXML" ID="RequestXML" value="<Request><RedirectURL>Account/TokenRequest</RedirectURL></Request>"
</form>
<iframe id="testFrame" name="testFrame" frameborder="0" style="width:1000px;height:500px"> </iframe>
Here is my script at the top of the page:
<script type="text/javascript">
$(function () {
$("#testForm").attr("action", "http://externalwebsite.aspx");
$('#testForm').submit();
var iframe = document.getElementById('testFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//alert($("#testFrame").contents().find("body").html());
//alert(innerDoc.innerHTML);
});
</script>
Both my alerts return null in Chrome, IE and firefox. What is the best way to access the elements inside that iframe. (in chrome i dont even see the html of that website when I try to do "inspect element" and view the html)
By the way I am doing all this in a MVC4 project
Assuming this is not a cross-domain issue, try:
var body = $('#testFrame').contents().find('body');
Since this cross domain you have two options.
if you have access to the iframe code, then you can place XDM code in there, maybe easyXDM would help.
Or
you have to go server side and get your php/asp.net etc backend to go get the page and get what data it needs.

Categories