This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Getting contents of iframe
Javascript: I need two examples.
Get content of loaded iframe which src is not on same server as parent page.
Get content of loaded iframe which src is ON the same server as parent page.
By content I mean InnerTEXT or innerHTML, or anything. Goal is to transfer variable from one page that is not on same server to other. This was my first thought. If there is any other way to transfer variable within javascript.
Sounds like homework. What have you tried so far? Are you allowed to use jQuery? Show us your examples.
EDIT:
Since you are allowed to use jQuery try going down this path for your solutions:
$('#iframe').contents().find('input').val();
It is not possible to transfer a variable from another website. But you can call functions which are defined in parent.
You make this function on your main site:
function helloWorld(text) {
alert(text);
}
And you call from inside of the iFrame with parent.helloWorld('hiho!');. This should work with the same or any different domain, but you need to access the different page, to add the method call!
Related
This question already has answers here:
How to pick element inside iframe using document.getElementById
(6 answers)
Closed 5 years ago.
I am working with a website that uses different iframes on the same webpage. I am wondering how I can access and manipulate an iframe that I am not currently focused in on.
The website has a body that allows users to type in, and I want to use the method innerHTML (javascript) to set the value of text in the box. However, I'm having trouble accessing the iframe.
Here is the Javascript that I was trying to use, but it wasn't working as I intended.. getElementById is not a function of getElementsByTagName("iframe")
document.getElementsByTagName("iframe")[1].getElementById("tinymce").innerHTML="Hello, world!"
Here are the two iframes that I am working with:
I cannot inspect the page and change the iframe by hand, so that is not an answer I am looking for. Thank you for clearing things up for me!
EDIT:
As suggested, I try
document.getElementsByTagName("iframe")[1].document.getElementById("tinymce").innerHTML="Hello, world!"
However, I am still receiving an uncaught type error
The outer HTML does not have access to the IFRAME html. If you are intending to change the part of the HTML then probably iframe is not the correct solution.
However, you could pass a parameter to the iframe src which will cause the intended change.
EG.
if you have iframe whose background needs to be changed based on an action on the outer HTML:
<iframe id="example" src="https://example.com?background="></iframe>
you can change the background to blue by changing the src url with a parameter
document.getElementById('example').src = "https://example.com?background=blue";
And within the iframe site HTML you can parse the query parameter and change the background.
I have a main html page which has a text input field and iframe in it .
I would like to be able to click a link in the iframe and and have the input text box value change to the value of a variable called selectedText.
Im not sure how to get it to work . I have been able to get it to work only from the main page by using this :
newListNote.value = selectedText;
As you cannot set the textbox value of parent page from iframe directly,
create a javascript function in your main page like this,
function setValue(val) {
document.getElementById('newListNote').value = val;
}
And call this function from the iframe page like this,
parent.setValue(selectedText);
I consider your textbox has id newListNote. Hope it works, thanks.
I think this one is related to Same-Origin Policy and Cross Site Script policy. You can't achieve it (correct me if i'm wrong).
Assuming your using jQuery as you tagged it and the iframe is another page within your site, it would be better to use .load()
$( "#result" ).load( "ajax/test.html" );
This then loads the page into your document where you can access the links. Then you can achieve your original goal. If the page is external to your site i'm not sure that this would work.
Good luck
A combination of the two answers here by #balaG and #Gereltod are correct.
As #Gereltod suggested, you cannot run JavaScript within an iframe from outside the iframe. If you could, then there would be serious security problems with the internet!
As #BalaG suggested, if you want the website to change based upon an event within the iframe, you need to write code within the iframe, and prepend it with parent.
This question already has answers here:
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
(7 answers)
Closed 8 years ago.
I have listen a lot that we should always load the java script at the end of the page why we should do that. If i write the java script at starting of the page how it will make the difference?
If you write javascript at the start of the page, than you'll not be able to access the DOM elements, directly.
However when you use it at bottom, all the elements will have been rendered and you can use them.
In the first case, you would need something like this:
window.onload = function(){
document.getElementById('id');
}
But in the second case, you need just:
document.getElementById('id');
Also, if you have scripts at the start of the page, it will block the UI from rendering.
If you're using JS to manipulate the DOM, you'll want the page to be loaded before the script is run - usually this means placing the script after the page content.
However, if the Javascript is in response to say an onClick event, you shouldn't need to put it at the base of the page.
For example:
function change()
{
document.getElementById('identification').href = "http://www.stackoverflow.com";
}
The associated HTML (the important bit)
Stack Overflow
<input type=button value="Change" onclick="change()" />
This will change the href in my tag to http://www.stackoverflow.com, but say I wanted to do this from a different HTML file? The JavaScript would be in the tag of the other file, but would edit the content of the first. Is this possible? If so, how?
Javascript lives only for the life of a particular page so you can't have code in one file modify another, as yet unloaded file.
Depending upon what you want the user experience to be, there are some options:
While on the first page, use some javascript to set a cookie and then when the second page loads, read that cookie and have the javascript in the second page adapt based on the cookie value. Cookies can be shared between pages on the same domain.
While on the first page, use some javascript to create a query parameter (those things after the ? in a URL that look like this ?show=true. When you load the second page, request that page by appending the ?show=true (or whatever you make up) to the end of the URL. When the second page loads, it can examine the query parameters on it's URL and decide how to modify itself. This is the simplest way of passing temporary arguments from one page to the next page.
Load the second page into an iframe (embedded into the first page) and when it's loads, your javascript can modify it (if it is served from the same domain as your main page).
Load the second page into your first page, actually inserting it into the original page either appending it or replacing some of your existing content. Then, the first page's javascript can modify the HTML from the second page once it has been inserted.
Open a new window with the new page in it. If it's on the same domain as you, then your javascript can reach into that new page and modify it.
Note: the browser tries to prevent page modifications when the two pages do not have the same origin (e.g. same domain). See a description of the same origin policy. So, if your question pertains to pages on different domains, then you will need to find a different way to solve your problem. Things like add-ons can sometimes get around the same-origin policy, but regular page javascript cannot for numerous security reasons.
Because I can't find a question that I feel matches this one enough to be closed as an exact duplicate, I'll post an answer:
Is it possible to use JavaScript in one document to change HTML in another?
Yes, assuming both windows are within the same security sandbox.
If so, how?
It's quite simple, you need to call the DOM functions from the context of the window you want to access.
a simple way to get a new window object is to call window.open
var newWin = window.open(newpage)
newWin is a window object, and therefor has a document object as well as all the other DOM elements that it may have loaded. Just like any other window, you'll need to wait for document.ready or window.onload if you're trying to interact with the elements being loaded on the page.
newWin.onload = function(){
var ident = newWin.document.getElementById('identification');
ident.href = 'http://stackoverflow.com';
};
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a way to have content from an IFRAME overflow onto the parent frame?
Here is my issue:
I have two types of dialog which (should) look and act the same. One loads content directly into the page, and one uses a iframe to load content. I have an element which I need to overflow out of the iframe and show completely on the page. This element is basically an enhanced select element built with a list (ul/li). How can I make this act as a select would inside an iframe and overflow the iframe?
The first thing that comes to mind is to put the select/list outside of the iframe and position it in the correct spot, though this will require communicating between the iframe and parent more than I would like. Ideally I'd like a solution that keeps the select/list in the iframe.
You can't.
An <iframe> is an element containing a separate, distinct browser window (essentially).
Think of it literally like a window: when you look out of your window, the view of the outside stops at the windowframe.
This is in contrast to content inside, say, a scrollable <div>, which is more like a hand-held sheet of glass with some stuff painted on it and some other stuff stuck on with sellotape and hanging off over the edges.
You could use php to load the page into your current page. A lot of people consider iframes bad practice. It would only take a couple lines of php to load the page elements, instead of an iframe, which is sometimes slower.
Here is how you would do it....
<?php
include('file.html');
?>
You would put this line in a and contain it on the page just as you would with the iframe. You can use ajax/js to seamlessly change the content of the html and even load things from a server if you wish.
Imagine that the document is a picture.
Imagine that the iFrame is a real frame.
Could you make the picture come out of the frame? No.
It's exactly the same thing here.
Your best bet is to figure out a way to avoid the iFrame.
Besides, iFrames are bad practice.