|
JavaScript - Making External Website Target Iframe. Some Help Please.
Hello. I have built a basic website that contains an iframe in the middle, called "iframe1". In this iframe I wish to load an external message board from proboards.com. In my code I can easily do this by making a button or hyper-link with the href="httproboards.com/myforums" and the rel="nofollow" target="iframe1"
When I do this it will load inside of it the iframe jsut as I want it to. However, my the problem is when you click on the button to login its coded to target "_top" and it opens on the entire page replacing the whole website. If i run firebug (a real time HTML editor). I can easily locate and change the link code to rel="nofollow" target="iframe1". But How can I write a script in javascript in my webpage code to do this as soon as the iframe has loaded the external messageboard? I have also been trying things like javascript:void(document.iframe1.getElementsByTag("a")[5].rel="nofollow" target="iframe1") but i have had no luck so far in changing the target without the aid of firebug. Here is the code that needs to be changed. the rel="nofollow" target="_top" needs to be altered somehow to rel="nofollow" target="iframe1" as soon as the frame has finished loading the messageboards. Code: <p><font size="2"> Welcome Guest. Please <a href="/index.cgi?action=login" rel="nofollow" target="_top">Login</a> or <a href="/index.cgi?action=register" rel="nofollow" target="_top">Register</a>.<br/>Nov 19, 2010, 7:23pm </font><br /></p> Heres a screenshot that may help, as you can see I have easily changed the target of the link to="iframe1" using firebug, but I need to hardcode a script in my website that does this automatically after the iframe has loaded the forums page. http://img191.imageshack.us/img191/7264/26796014.jpg Thanks to for any help. Similar TutorialsAnyone familiar enough with pikachoose to help me out here? Using a pikachoose slideshow inside an iframe and for some reason adding a url target of _top or _parent is not working. It just opens up the link in the iframe window no matter what i do. Anyone with an idea of how to fix this? I'm working on it in the staging area of my site- http://staging.susanb.com/ You can see when you click on one of the images it doesnt fill the entire window This just creeped up on me at the end of a project so im hoping its not a deal breaker thanks in advance!! I know next to nothing about javascript and I don't even know if this is possible. I need to target window.location.href to an iframe on a different page. So, right now, the piece of the code that redirects the browser looks like this: Code: window.location.href='http://www.somewhere.com/'; Works great, brings it up in the same browser window. So now I need to modify the code so it goes to a different page and brings that page up in a specified iframe. I hope this makes sense. I really need help. And if it is not possible, I just need to know to abandon all hope. I'm a little rusty since i've been studying vb .net I forgot how to make this external. I know I'm messing up somewhere. Code: <script type="text/javascript">
function titbar(val)
{
var speed = 300;
var pos = val;
var tit1 = "V";
var tit2 = "VO";
var tit3 = "VOT";
var tit4 = "VOTI";
var tit5 = "VOTIL";
var tit6 = "VOTILL";
var tit7 = "VOTILLI";
var tit8 = "VOTILLIT";
var tit9 = "VOTILLITY";
var tit10 = "VOTILLITY.com";
if(pos==0)
{
titdis=tit1;
pos=1;
}
else if(pos==1)
{
titdis=tit2;
pos=2;
}
else if(pos==2)
{
titdis=tit3;
pos=3;
}
else if(pos==3)
{
titdis=tit4;
pos=4;
}
else if(pos==4)
{
titdis=tit5;
pos=5;
}
else if(pos==5)
{
titdis=tit6;
pos=6;
}
else if(pos==6)
{
titdis=tit7;
pos=7;
}
else if(pos==7)
{
titdis=tit8;
pos=8;
}
else if(pos==8)
{
titdis=tit9;
pos=9;
}
else if(pos==9)
{
titdis=tit10;
pos=0;
}
document.title = titdis;
timer = window.setTimeout("titbar("+pos+")",speed);
}
titbar(0);
</script>
it works just fine when I have it internal p.s tit is short for title. no explicitive necessary. I have two pages A and B. I have a link in the page A. I have two iframes in the page B. In practice, the link in the page A must open the page B and the link's href must open in the second iframe of the page B. Is there any script that does this? Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies. Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs. Gentlemen, I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars. The function for resizing the iframe id="child" is already correctly implemented like so: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>
and the call Code: <iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child"> This what I have going on: - index.html => contains some content and the iframe id="child" - childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/" Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid. Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called. In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required. This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC. All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com". The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script. As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated. Thanks, I'm kind of new to javascript so forgive me for my ignorance. Is their anyway to track right mouse click within an iframe that is linked to an external site (i.e. www.nbc.com)? I'm trying to see if I can have a alert window say "This is an image" when i right click on an image within the iframe. Hello, First time on the forum and I am admittedly a complete noob, so forgive me for any grievous misconceptions. I am a teacher trying to create a bulletin board on my website where students, teachers, and parents can post messages. I am trying to use the site linoit.com I am trying to embed that site on my website using an iframe url: http://www.capretto.net/stickyboard.shtml My problem is that when you go to the message board on my site it asks your for a username and password to login to access my message board from linoit. I was hoping there is a scripts or other trick that will auto fill the username and password when the page loads so that the message board opens automatically. Not too worried about privacy, but I could distribute the username and password to all interested parents, teachers, etc. but in my experience one more step between students and the information they need can be the difference between them not receiving the info. I'd be happy to give any contributors credit on my site for their coding help. Thanks in advance. Hey guys. Is there any any ANY way to read highlighted text of in an iframe that is displaying an external server / site? Say you select some text in the iframe and click a button outside of the iframe that prints the selected text to a textbox? Really really would love to do this or any ANY workaround. This really sucks that its a security measure by default that doesn't allow this!! Ugh! I am using the following javascript on the target page to open it as top location from within an iframe, which is working ok. Code: <script type="text/javascript">
if(self!=top) {
top.location.href=location.href
}
</script>
However my problem occurs when the user uses the browsers back arrow to return to the previous page, the script executes again returning them once more to the page they have come from. Is anyone aware of a work around to this problem as it would seem there isn't one? perhaps even a better solution for opening the target page from the iframe as top location. This is really causing confusion for users, and I really need to get the issue fixed. Thanks for any assist. I've been scouring google and multiple forums for an answer to this, and nothing really 'hit the nail on the head' as far as what I am trying to do. What I have is a game server status window in an iframe on my site, which is already set to auto refresh every 30 seconds. (It was a task in itself to get rid of the refresh flicker btw) Now, the problem is, people coming to the site don't know 'when' the 30 seconds started, even though it starts when they enter the site. This is causing confusion and many questions (even though they can just wait the 30 seconds and watch it change). I found a forum on dynamicdrive that had a script which counted down, but the counter didn't reset to 30 seconds, which made it pretty much useless. All I want it to say is "next refresh in 30 seconds" under the iframe window, and count down. Beings as the php file that the iframe is linked to already starts timing itself upon page entry, I just need a timer that displays a countdown that also starts on page entry. I just want to show people that it will be refreshing when the timer hits "0" Is this possible? I've spent 4 hours trying different scripts and nothing does what I want (they either refreshed the entire page, or the timers wouldn't restart), so I am starting pretty much from scratch with this, and I am throwing this to the masters. If anyone can help, PLEASE let me know! Thanks in advance - Nitro Hello all, From what I've seen there isn't really a solution to this problem, but I thought I'd try my luck. I'm trying to code a website that's built around an iframe (as in, the nav bar links to content which appears in a central iframe). Now, in one of my pages I've got links that are supposed to open a small text block when they're clicked. I've figured out how to do this using either divs or the DHTML window widget (http://www.dynamicdrive.com/dynamici...ndow/index.htm), but in both cases the tab appears inside the iframe, and it's pretty cramped. I want to position it relative to the parent window, not the iframe, but so far haven't been able to figure out how to do this. Does anyone have an idea? Thanks! ok i need a bit of advice.. I have a webpage and i want to put a section of another website on to my own website.. i have a www.bebo.com profile and i only want to show the comment section on my website.. my profile is www.bebo.com/thegaadiscos is there a way to only show the comments div of the bebo site on my own website? What i want is a bit like the face book section of this website http://www.alexandraburkeofficial.com/ How would this be done does anyone know.. how do i make a wordpress website with tabs to different sub-sections without changing pages, its almost seems like an iframe... example: http://www.alexa.com/siteinfo/google.com [look at the tabbing, and how it doesn't change URL] how can i make it like this using wordpress? is there a plugin? also, i need something that will make an iframe for me [of another website] but make it impossible to click or right-click, BUT can scroll. is there some type of plugin for wordpress that can help me do that? [so i can customize the template of the iframe and the page the holds the iframe] thanks!! (: Hi, I hav linked external js (ext1.js) to my app.html page. Now in the ext1.js, I have a function like [CODE] function onwindowload(){ //Access HTML element and append external js 2 (ext2.js) here }[CODE] //Access HTML element and append external js 2 (ext2.js) here--->I donno how to add external JS here. Even if i add the external JS here, the JS uses document.write fn. which replaces entire page. Please suggest a solution Hey guys, I'm trying to obtain the object of the element on the page that is clicked, but my code is unable to set the target. Here's what I have. The JavaScript Code: function show_info(e){
//get the targeted element.
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode;
alert (targ); //FAIL!
}
The Form Code: <form action="#" method="post"> <input type="hidden" name\"id" value="" /> <input type="submit" name="submit" value="Info" onclick="show_info()"/> </form> What I want to do is get the target element(the submit button) so that I can get its sibling(it contains a unique ID). But it's not working. Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? tested this only on FF. Code: target = this.parentNode.parentNode.getElementsByClassName('help')[0];
target.style.display = (target.style.display=='none')?'inline':'none';
-->Error: target.style is undefined In next two codes what is red is different, all the rest as above. Code: var target = this.parentNode.parentNode.getElementsByClassName('help')[0];
target.style.display = (target.style.display=='none')?'inline':'none';
--> works. Code: xxx = this.parentNode.parentNode.getElementsByClassName('help')[0];
xxx .style.display = ( xxx .style.display=='none')?'inline':'none';
--> works. Why is that ? Need help adding var target to this form action Would This be correct? var form = inp.form; form.target = "_self"; Code: <html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
var form = inp.form;
form.action = op + ".php";
var temp = inp.id.split(",");
form.id.value = temp[0];
form.FirstName.value = temp[1];
form.LastName.value = temp[2];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">
<input type='image' id='show,me,data' onclick=formop(this,'add'); src='static/icon16/add.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'edit'); src='static/icon16/edit.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'delete'); src='static/icon16/delete.jpg'>
</form>
</body>
|
|||||||