I have a website where all the navigation happens inside of an iframe. all the pages are locally stored on the server.
a reduced version of the html code is:
>> index.php
<html>
<head>
</head>
<body>
<table><tr><td>
<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">
</body>
</html>
Note the img is inside the main page. However, I want this image to change based upon what link is navigated to inside the iframe.
Right now I am using php GET to determine what page has been navigated to, but that is not a great solution because all the user has to do is tinker with the link and the desired image disappears.
eg:
<?
$locate = $_GET['locate'];
?>
<html>
<head>
</head>
<body>
<table><tr><td>
<? { if ($locate =="link") {
echo '<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">';
}
?>
</body>
</html>
The link inside the iframe page is:
http://example.com/index.php?locate=link
What I would like to do is somehow have the parent page holding the iframe to recognize what page is inside of the iframe and make the display of the image contingent on that instead of the hack above. I think that would be a more reliable way and not subject to the user manipulating the link.
As an aside, if there is a way to GET 'locate' in the link w/o the link showing in the address bar, that might be a compromise. But as far as I know, that can't be done.
====
EDIT
I found this:
document.getElementById("iframe_id").contentWindow.location.href
But I am not sure how to implement it.
I tried
<script>document.write(document.getElementById("vframe").contentWindow.location.href );</script>
in the body and the head ...
but the iframe link is not displayed
i tried this:
<html>
<head>
<script>
function getLink()
{
var x=document.getElementById("vframe").contentWindow.location.href;
}
</script>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
</body>
</html>
But if it is supposed to work, i can't figure out how to 'read' the result of var x ...
i tried this:
<html>
<head>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no id="vframe"></iframe>
<script>document.write(document.getElementById("vframe").contentWindow.location.href);</script>
</body>
</html>
but the result is "about:blank". If I place it in the head or above the iframe there is no result ...
Related
I have some content on my site that can be embeded by other domains. What happens is that my iframes need to have an ID to run some javascript.
This is the iframe code I provide to my users:
<iframe src="http://www.example.com/embed/2854" id="zframe" width="100%" height="460" scrolling="no" frameborder="0"></iframe>
When the users remove the frame ID, my javascript stops working.
Is there a way wo force the iframe to have an ID via javascript?
Bellow is my implementation to try forcing the ID usage on my iframe when users remove the ID from the iframe code I provide:
<html>
<head>
<title></title>
</head>
<body>
<script>
document.getElementByTagName('iframe')[0].setAttribute("id", "zframe");
</script>
</body>
</html>
I have an extension in which when I click on the icon, a popup opens. The user will not press any buttons within the extension page, the page should by default be the Google page due to the script mentioned.
The code for the pop up (in HTML) is:
<html>
<head>
<style type="text/css">
body {width:780; height:580;}
</style>
</head>
<script>
var value_raw2 = "https://www.google.com/";
document.getElementById("MyFrame").src = value_raw2 + ReturnURL();
</script>
<body>
<iframe id="MyFrame" src = "" width="100%" height="100%" frameborder="0">
</iframe>
</body>
</html>
Basically, I want the pop-up to open Google.com and not a blank page by implementing the script. However, it seems to be ignoring the script. This is a basic case which I will be refining later to dynamically change URL to anything at all at random.
I do not get it. I thought that I didi it, and now I cannot do it.
Simple html with an iframe. Indide the iframe is another html. I want to change an image from the main iframe when you access the iframe.
HTML from the main html:
Main html:
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<img id="logo" src="../img/fpdfilms-logo-home.png" />
<iframe id="fondo" name="main" src="test.html"></iframe>
</body>
</html>
test.html
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<a href="#" onclick="change();">Change Picture</p>
<script src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function change()
{
var $logo= $('#logo', window.parent.document);
alert("Does it work?");
$logo.attr("src","../img/fpdfilms-logo-director.png");
}
</script>
</body>
</html>
It is supposed to change the picture when you click on the link. But the ALERT is not showing... I've tried different ways and I'm really lost. Is so difficult to achieve this simple change?
Checked your page (chrome 40) and got
SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
so I checked in a server (local express) and works fine.
You can refer to this answer as it does what you need with jquery.
how to access iFrame parent page using jquery?
From the above example selecting an element from an iframe in the parent document use
var $parentElement= $('#parentElement', window.parent.document);
Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source
I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.