I have a website called A i want to display another website called myFrame through A using iframe i want to count all the clicks in myFrame and want to display in my website A.myFrame site is in different domain.I did the following code but its not working.
i can add any javascript code in myFrame website
<html>
<body>
Count: <span id="clicks">0</span>
<iframe id="myframe" src="http://www.myFrame.com" class="restricted" height="400px;" width="400px;" scrolling="no" frameborder="0">
</iframe>
</body>
</html>
<script language="javascript">
$(function() {
var clicks = 0;
$('#myframe').contents().find('a').bind('click', function(e) {
e.preventDefault();
clicks++;
$('#clicks').html(clicks);
});
});
</script>
It is impossible. Same origin policy prevents you from monitoring/accessing anything in another domain.
Related
I currently have a working webpage that has a list of links that open in a targeted iFrame. I would like to add a subsequent iFrame target and be able to open supplementary pages in that iFrame as well as the original iFrame with the same link.
From my research, it seems this should be possible with some JS but I'm struggling to figure it out.
So basically, how could I click on "Lot 1" and open up a Youtube in the "gallery" iFrame and, say, www.example.com in the "info" iFrame simultaneously?
<iframe src="" name="gallery"</iframe>
<iframe src="" name="info"</iframe>
Lot 1
Lot 2
You can have an array/object storing the links, and then run an onclick event that will change the corresponding iframe sources to the values from said array (iframes have a src attribute which you can change through JS).
For example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = ['http://example.com/', 'http://example.net/'];
function setSource() {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource();">Click me</span>
</body>
</html>
If you'd like to have multiple span elements, each changing the iframes' sources to a different set of links, you can always use a multidimensional array (an array of arrays) for src and add a parameter to the function:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = [['http://example0.com/', 'http://example0.net/'], ['http://example1.com/', 'http://example1.net/']];
function setSource(num) {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[num][i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource(0);">Click me #0</span>
<span onclick="javascript: setSource(1);">Click me #1</span>
</body>
</html>
Here hrf is an array that contains another array (['http://example0.com/', 'http://example0.net/']) at index 0 and yet another one (['http://example1.com/', 'http://example1.net/']) - at index 1. By passing a parameter to setSource we can choose what subarray we want to pick to get the sources from.
Please don't forget to close your tags.
Using the a tag for your purpose is not a good idea, I recommend using a span. The a tag's purpose is to link the user to another document, not run javascript code (not using a also means you don't have to use preventDefault).
The javascript: prefix is used for the onclick attribute to provide backwards compatibility for some older mobile browsers.
This code works simply great :
<!DOCTYPE html>
<html>
<body>
<h1 style="display:flex;
justify-content:center;color:green;">
GeeksforGeeks
</h1>
<iframe src="about:blank" id="frame1"> </iframe>
<iframe src="about:blank" id="frame2"> </iframe>
<button id="update">Click me</button>
<script>
document.getElementById('update').addEventListener('click', function () {
// Change src attribute of iframes at a same time
document.getElementById('frame1').src ='https://www.google.com/search?q=java&igu=1';
document.getElementById('frame2').src ='https://www.google.com/search?q=farming&igu=1';
});
</script>
</body>
</html>
I use this script:
<div id="accesso" class="spalla_basic grigio_type clearfix">
<iframe src="test.php" frameborder="0" width="257" height="160" marginheight="0" marginwidth="0" scrolling="no"></iframe>
</div>
In my homepage I have the above code. And when I press yes on the above block it will redirect to a new page.
But my problem is: when I click on this block, it redirect me to a new page but with in this block.
So you basically want the page within iframe to escape the frame and load in a different tab after you click over the button ? Is that what you are trying to accomplish ?
Try adding the following code to the <head> section.
<script type="text/javascript">
if (top.location!= self.location){
top.location = self.location
}
</script>
The following is the HTML file with your iframe which loads your PHP code that has a button.
<html>
<body>
<iframe src="sample.php">
</body>
</html>
Suppose landing.php is the page that you get redirected to after clicking over the button. The JavaScript code should be incorporated in landing.php
<?php
echo "<html>
<head>
<script type="text/javascript">
if (top.location!= self.location){
top.location = self.location
}
</script>
</head>";
?>
I have an HTA, which in turn has an Iframe. We are loading an intranet website. A button in the HTA, when clicked, will automate some task. The first step is to login, wait for the next page to load, then perform next option. The main concern here is to know that the next page has been loaded completely, so that we can initiate the code related to page ?
Can some one shed light on how to achieve this. Just to repeat, IFrame is inside HTA.
Below is my code :
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="HTA"
SYSMENU="YES"
NAVIGABLE="YES"
>
<meta http-equiv="x-ua-compatible" content="ie=11">
<title>HTA</title>
<script type="text/javascript">
window.resizeTo(900,700);
</script>
<script type="text/javascript" >
function Start() {
var iframePage = document.getElementById("iframeid").contentDocument;
var userId = iframePage.getElementById("userid");
var passwd = iframePage.getElementById("pwd");
var form = iframePage.getElementById("login");
userId.value='aa';
passwd.value='bb';
form.submit();
var iframePages = document.getElementById("iframeid").contentDocument;
var targetContent = iframePages.getElementById ("ptifrmtgtframe").contentDocument;
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
}
function Show() {
document.getElementById("iframe").style.display = "block";
}
</script>
</head>
<body>
<form class="form" name="form">
<input class="links" type="button" value="Show PIA" onclick="Show();" />
<input class="links" type="button" value="Login" onclick="Start();" />
</form>
<br>
<div class="iframe" id="iframe" style="display:none">
<iframe application="no" src="my URL" width="600" height="600" id="iframeid">
</div>
</body>
</html>
I want that:
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
Should run, only after the page in the IFrame has loaded properly and completely, since only then the relevant feilds will be loaded. Or else, this will give error.
PS This is a PeopleSoft site.
Here is a simple example of calling code when the iframe has loaded. Check out the onload attribute of the iframe tag. Maybe you can integrate this into your HTA?
<head>
<script>
function frameLoaded() {
alert('frame loaded!');
};
</script>
</head>
<body>
<iframe id="frame" src="https://en.wikipedia.org/wiki/HTML_element#Frames" onload="frameLoaded(this)" />
</body>
If you have access to the page, use javascript inter-window communication to trigger the JS you need. The child iframe can tell the parent when to run java script.
From a pure PeopleSoft perspective you can use related action framework component events to do what you like, too, without customization.
I think you can check the code for related content as reference. Such as OpenRCService and onRCService. In PT_COMMON, the showModalDialog method also related to the RC function which have the logic to detect a iframe is loaded.
I'd like to remove an unnecessary header from an iframe contained within the prettyPhoto lightbox plugin that's part of WooCommerce (http://www.shapur.com/product-category/fp-journe/). When you click on the single product button at the bottom of that page, it should remove the body tag contained in the iframe. The iframe conforms to the same origin policy, so that's not it.
I've created a test page here on same domain, which works great: http://www.shapur.com/test.php.
Is there a conflict with the lightbox? I just don't understand. Grateful for any assistance.
Here's the code for the test page:
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="http://shapur.com/index.php"></iframe>
<p>Click the button to change the style of the body tag contained in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myframe");
var y = x.contentDocument;
y.body.style.display = "none";
}
</script>
</body>
</html>
Since it's coming from the same origin, why don't you use jQuery load() function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function myFunction() {
$(".myDiv").load("/index.php",function(data){
$(data).find('body').css("display","none");
});
}
</script>
And have an empty :
<div class="myDiv"></div>
This way, it would be easier for you to play around with the code.
I'm trying to create an external link, that appears within the same site.
Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA
My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.
Google
<script type="text/javascript">
function executeOnClick(){
<iframe name="your_frame_name" src="www.google.com" > </iframe>
return true;
}
</script>
I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.
Is there any other way to fix my issue..
No javascript is needed, use target attribute:
Load the page
<iframe id="iframe1"> </iframe>
JSFiddle
IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header
function executeOnClick(){
$('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
return true;
}
try this
The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(target) {
document.getElementById("targetFrame").src = target.src;
return false;
}
</script>
In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:
Google
<iframe name="targetFrame" id="targetFrame"></iframe>
Change to this:
onclick="executeOnClick(this); return false;"
and do this in your funcition:
<script type="text/javascript">
function executeOnClick(elem){
var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
document.body.appendChild(frame); // <----append it here.
}
</script>
In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.
please note that the google.com will not work with iframe
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(src) {
document.getElementById("targetFrame").src =src;
}
</script>
<iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>
Use runat attribute too. Hope this works.
If doesn't, what's the error?