Activate iframe and change its contents - javascript

I am losing my marbles over this issue:
There's an iframe that i try to programmatically manipulate, but somehow this is only possible after i go into the developer console and click a parent node.
This is the best i can come up with:
var iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < iframes.length; i++) {
if (iframes[i].parentNode.id == 'cke_355_contents') {
iframes[i].contentWindow.document.open();
iframes[i].contentWindow.document.write('<html><body>Hello World</body></html>');
iframes[i].contentWindow.document.close();
}
}
Even if i try to list all iframes on the page:
document.querySelectorAll('iframe').forEach((iframe)=> {
console.log(iframe.id, iframe.className, iframe.src)
});
i just get the first 2 results. But, when i click a parentnode in the console, it will only list the iframe i actually need.
Is there some way to find the correct iframe,"activate" it and manipulate it?

Related

get a dynamic id from an iframe in an iframe

I am actually doing a tricky task, I have to create pack of resource(which are pages on the website), to do so I use iframe to display the content of the pages. But I can have multiples Iframes in one Iframe.
And I want to pass some style on those iframe in iframe, so i have to target them.
I have a special node id for each pages that allow me to return only the body.
So my question is how do I get to target the id of my iframe in my iframe which I tried to do with that line var get_iframe_inside = search_inside.getElementsByTagName("iframe".id); to then modify it's style.
I know that I am not using the right way for this line, but I have been scratching my head all this morning and can't find a way.
function test(id){
var iframe = window.parent.document.getElementById(id); //select my first iframe
get_iframe_inside(id); //call my function to get the iframe in the iframe
function get_iframe_inside (id){
var search_inside = (iframe.contentDocument) ?iframe.contentDocument : iframe.contentWindow.document;
//My goal is then to modify some properties
var get_iframe_inside = search_inside.getElementsByTagName("iframe".id);
$(get_iframe_inside).css({'padding':'0px 50px', 'background-color':'#cecece'});
}
}
Well it was kind of trivial my code was nearly working i just didn't tought at how to get thoses ids.
i just had to get them by tag and after that to do an iteration with for.
var get_iframe_inside = search_inside.getElementsByTagName("iframe");
var i;
for (i = 0; i < get_iframe_inside.length; i++){
get_iframe_inside[i].style.padding='0px 50px';

Open specific links from a webpage with javascript?

I'm using Tampermonkey, and I can't seem to get jQuery to work on it so this has to be Javacript only.
I'm trying to get a script to open (in a new window) the link of an item on a webpage. I've got a list of items I need to open, here is an example of those items:
<a class="market_listings" href="http://blabla.com/item1">...</a>
<a class="market_listings" href="http://blabla.com/item2">...</a>
<a class="market_listings" href="http://blabla.com/item3">...</a>
etc.
As you can see, the item is defined by a class and an href. The class is not unique, but the href is.
I'm new to programming but this is my idea on how to open specifically those links from the page:
The script gets elements with class="market_listings",
just to narrow down the search of hrefs on the page.
The script looks if the href of those elements corresponds with
"http://blabla.com/item*"
The script opens a new window with that href.
I have pretty much 0 experience with coding, but this is how I'd start it, considering I only want to open items 1 and 3:
function gethrefandopenwindow() {
var items = document.getElementsByClassName('market_listings')
//don't know how to code from here
if (*a href of items corresponds to*: 'http://blabla.com/item1')
{
*open new window to href of item1*
}
if (*a href of items corresponds to*: 'http://blabla.com/item3')
{
*open new window to href of item3*
}
else {
*refresh the page and start over*
}
}
As I said, I have barely programming experience, so I don't know if this is possible, and if it is and you're willing to help, please explain it to me like I'm a TOTAL idiot/newbie. :)
The only other way I could think of is this one: Javascript getElement by href? ; Except I don't know how to apply it in my situation due to my noobiness (and how to open a specific href out of the elements).
Anyway, I hope you can help me,
Thank you!
It looks like you had the right idea. This function might get you moving in the right direction.
function OpenHrefsInNewWindow() {
//Get reference to your elements
var items = document.getElementsByClassName("market_listings");
for (var i = 0; i < items.length; i++) //Loop through your elements
{
//Verify that the href starts with http://blabla.com/item
if (items[i].href.indexOf("http://blabla.com/item") === 0)
{
//If it does, open that URL in a new window.
window.open(items[i].href, "_blank");
}
}
}
Another way to write it:
function OpenHrefsInNewWindow() {
//Get reference to your elements
var items = document.getElementsByClassName("market_listings");
var i = 0;
while(i < items.length) //Loop through your elements
{
//Verify that the href starts with http://blabla.com/item
if (items[i].href.indexOf("http://blabla.com/item") === 0)
{
//If it does, open that URL in a new window.
window.open(items[i].href, "_blank");
}
i++; //Increment i here.
}
}
Can retrive the url of link taking value of atribute and do ankthing later
Url = $(this).attr ('href')

Make a page reload and execute a script from the URL

This is what I've got so far:
var x = document.getElementsByName("treeframe")[0].contentDocument.getElementsByTagName("a");
for(var idx = 0; idx < x.length; idx++){
var link = x[idx].href;
if ( link.indexOf("STRING_TO_SEARCH") != -1){
alert("found!!!");
} else {
window.setTimeout("location.reload(true);",10000);
}
}
The thing is that, after the reload when it is not found, it does not re-excecute the script.
Note: the getElementsByName is needed because I need to search in a frame inside the page, but can not acces ONLY the iframe
So you're talking about a bookmarklet? Or do you have this thing in a Frameset? If its in a frameset, and you control the frameset then you should be able to attach an event listener to the element that you are reloading. Otherwise you can probably do some form of polling using either setTimeout or setInterval to check to see if the contents of the frame are accessible.

How to disable div blocks having a certain id pattern?

I would like to write a greasemonkey script to disable a div on a certain page.
On any given load of the page I don't know where in the DOM the div will be but I know it's always called <div id = "alertPanel"> ....</div>
How would I go about disabling this div?
My intial thoughts were something along the lines of:
var myDivs= document.getElementsByTagName('div');
for (i=0; i<myDivs.length; i++)
{
if (myDivs[i].<get id property somehow> = "alertPanel")
myDivs[i].style.visibility = 'hidden';
}
but as you can tell I'm stuck at accessing the id property for an equality check.
Incidently, I'm using a text editor to write this - I guessing that a standard javascript editor would give an autocompletion list after typing in myDivs[i].
If it has an id, you can use document.getElementById:
var div = document.getElementById("alertPanel");
Then if it exists, you can either remove it (probably a bad idea) or hide it:
if (div) {
div.style.display = "none"; // Hides it
// Or
// div.parentNode.removeChild(div); // Removes it entirely
}
Update: Re your comment on another answer:
thanks for your answer. Does your statemt apply to a page with iframes too. The div in question is in an iframe. I've tried ypur solution and it didn't work unfortunately. maybe a link to the page will help: tennis.betfair.com the div i want to disable is the one with id: minigamesContainer
If the element is in an iframe, then you have to call getElementById on the document that's in the iframe, since iframes are separate windows and have separate documents. If you know the id of the iframe, you can use document.getElementById to get the iframe instance, and then use contentDocument to access its document, and then use getElementById on that to get the "minigamesContainer" element:
var iframe, div;
iframe = document.getElementById("the_iframe_id");
if (iframe) {
try {
div = iframe.contentDocument.getElementById("minigamesContainer");
if (div) {
div.style.display = "none";
}
}
catch (e) {
}
}
(The try/catch is there because of a potential security error accessing the content of the iframe; I don't know Greasemonkey well enough to know whether the SOP applies to it. I tend to assume it doesn't, but better safe...)
If you don't know the id of the iframe or if it doesn't have one, you can just loop through all of them by getting them with document.getElementsByTagName and then looping:
var iframes, index, iframe, div;
iframes = document.getElementsByTagName("iframe");
for (index = 0; index < iframes.length; ++index) {
iframe = iframes[index];
try {
div = iframe.contentDocument.getElementById("minigamesContainer");
if (div) {
div.style.display = "none";
break;
}
}
catch (e) {
}
}
References:
DOM2 Core
DOM2 HTML
DOM3 Core
HTML5 Web Applications APIs
In valid HTML you can have only element with certain ID. So:
document.getElementById('alertPanel').style.visiblity = 'hidden';
But if you still need to iterate all div's and check their ID's, then this should work:
if (myDivs[i].id == "alertPanel") myDivs[i].style.visibility = 'hidden';

Disabling a link tag using JavaScript on my printable page

I have a script that creates a printable page by copying the HTML across and then doing some manipulation, such as disabling the buttons on the page, on page load.
I also want to disable the links on the page. I don't really mind if they look like links still as long as they don't do anything, and don't give any JavaScript errors!
The anchor tag doesn't seem to have a disabled attribute...
Unfortunately, I can't use jQuery, so JavaScript only please!
Edit: I want to disable the links, buttons etc on the page so that when the 'printable page' opens in another window, the user cannot mess with it by clicking buttons or links. I want it to essentially be a 'frozen snapshot' of the page that they want to print.
Setting their href to # and overwriting the onclick event should do the trick.
var links = document.getElementsByTagName("A"), j;
for (j = 0;j < links.length; j += 1) {
links[j].href = '#';
links[j].onclick = function () {
return false;
};
}
Why can't you use jQuery? So much nicer...
$('a').each(function(){this.onclick=function(){return false}});
Anyway here is a normal javascript way. Smaller than above and you also don't need to modify the links... by defining the onclick function to return false it will not visit the href:
var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++)
anchors[i].onclick = function(){return false};
There is also an array of links in the document object. While I've never tried, I believe you can set them too.
for (i=0;i<document.links.length;i+=1) {
document.links[i]=='#';
}

Categories