Is there any way at all to edit the way a page looks within an iframe? I want to change the color of specific links on, say, a google search within an iframe.
Also, why doesn't the code below work in javascript console when google.com is loaded normally?
document.body.getElementsByTagName("a")[0].style.color='red';
You can't modify content from another domain with Javascript even through an iFrame. If you want to attempt something like this you could site scrape get all the html elements and then display them on your own page using a server side language (getting around domain restrictions of JavaScript).
You don't have javascript access from one frame to another one loaded from a different domain.
For the second question, test this :
var test = document.body.getElementsByTagName("a");
for (var i=0; i<test.length; i++) test[i].style.color="red";
The difference with your code is that I change all "a" elements, not just first one.
Related
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.
Ok, this is my problem... I have two pages. On the first page I have a header (h2) element on which I want to apply a border style. On the second page, there is only one link. When clicking on the link from the second page, to navigate to the first page, it should create a border on the first page around the h2 tag.
Any thoughts on how to do this? Is it possible to do it with regular JavaScript or jQuery?
Thanks!
No, JavaScript is client-side and for this you would require the server to remember if the link was clicked, possibly by recording this in a database or session variable.
That's of course if you're using the tradition model of a website, rather than loading pages already using pure JS.
It would be a pretty stupid way of doing it, but it is possible to do it client side. I would seriously recommend to do it server-side though.
On page 2, link back to page 1 with a hash:
Go back to page one and add a border
And on page 1, check if there's a hash:
if (window.location.hash === '#border') {
$('h2').addClass('withBorder');
}
I think if you are looking this kind of scenario you can achieve it with passing some hash to the url:
i passed a hash named 'second' in the second page url and put this script on second page
$(function(){
var url=window.location;
var hash = url.hash.substr(1);
if(hash == "second"){
$('h2').css('border','solid 1px red');
}
});
Checkout this if helps.
Well there is a way you could do this with JavaScript, although it's tricky and server side is a LOT easier. You would need to use some JavaScript to load different pages without refreshing the entire DOM. I do this with something called pjax. The way it works is to have each page act as a container to load all subsequent pages via ajax. By not doing a full page reload, any style changes you make on one page get carried over to other pages (this dose not survive an actual browser refresh).
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';
};
I have a website that is 1 html file and uses javascript to hide tabbed pages.
The url gets rewritten with a # for the different pages to make them bookmark-able.
Is there a way to make the different pages show in search engine results? It would be good to have them show up as different pages there.
I have read the below doc, but I think that is just for dynamically generated ajax content, right?
http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I read the page mentioned by you. That is for Ajax site. In your case it is not Ajax.
Another point as Jeff B has mentioned is that the chance is high that Google will index all content for each trick you use. In that case it would be bad as Google will get duplicate content. It will be not very bad as all content are from your site only.
Search Engine questions like this are very tricky and difficult to answer as no one know the exact functioning of Search Engine.
In my thinking you either recreate your pages as Ajax and follow the points mentioned in article you got. Or
Use a link for each tag with param. like page1.php?cat1, page1.php?cat2, etc.
and that only load content related to specific tag at a time.
The second solution is no different than implementing different page for each tab, but it can be easier to update in your case! and also all content are still accessible by both person and search engine at a place. Slowly search engine will index your each page with parameter. Remember, It is generally said that Google does not index pages with parameter but it is not true. Google does not index page with variable or id kind of parameter only. They index each page with popular parameters if page content changes.
Still your question is tricky and my suggestion is what comes to me after thinking much about it.
The problem seems to be that even if the different pages were indexed, they would all index the same content. This is because according to your explanation all of the content (including hidden) exists at load time.
If your tabs are links, you simply need to put the href in the link. Google should follow this link, while javascript-enabled browsers will execute your tab-switching code and not follow the link (if you coded it right).
However, the problem of all content being indexed for all pages still remains.
Modify your system like this:
Every link that changes the content of the current tab should have
as href attribute a subpage that contains the content of the tab
intended to appear -> this will be cached by Search Engines.
Those links should have binded JS actions that changes the content
of the current tab and also denies the redirecting that should have
been done by what's in the "href" attribute -> this will be shown to
the user
I have an iframe inserted into my main page.
The iframe generates a value which is of the type hidden
I need to extract this value into my main page using a javascript
Can someone please help me with this?
If the page that you load in the iframe is in the same domain of your main page, you can access the DOM of that page with:
window.frames[iframeName].document
and than it's very easy to get the value of any element.
You can access the contents of the iframe from the parent page the following way:
var iframe = document.getElementById("iframeId");
var field = iframe.contentWindow.document.getElementById("hiddenFieldId");
I didn't test it and it's been a while since I've used raw DOM in JavaScript so let me know if it does not work.
If the url of the iframe is to a different domain then you might need to make sure the domain of the document in the iframe is the same as the domain of the containing document.
Run this code in both documents before trying to read the values of the field:
document.domain = "example.com";
If the content of the iframe belongs to a different site than yours, then you do not have access to it with javascript. This is a security measure.
Use this
fram.document.getElementById("name").value
Sure it will work
Details :
fram = id given to the frame
name = id given to the text box inside the frame
If your page and the iframe content come from different domains, this will be quite tricky. I was recently forced to find a workaround for this and managed pull it off with an AJAX call to a PHP script utilizing file_get_contents() but it is not very copyright compliant or secure...