Is there a way to target an HTML element that is being pulled in dynamically via an iframe. I have an example below to illustrate what I would like to do:
<html>
<body>
<iframe>
<html>
<body>
<a id="id">I want to target this element</a>
</body>
</html>
</iframe>
</body>
</html>
#id{display:none;}
Note: I am open to use javascript or similar to target this element. Accessing the content from the source is not an option.
Related
I have this iframe inside an iframe. Both of this iframe has no ID. The code looks like this:
<div id="Test">
<iframe>
<iframe>
<head>
<style>*CSS code right here*</style>
</head>
<body>
</body>
</iframe>
</iframe>
</div>
Could i add some CSS on the 2nd iframe using javascript?
To fetch the next iframe try this..
$(document).ready(function(){
$("iframe").next(iframe).css({"color": "red"});});
I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
I have this minimal test case
a.html
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myinput">
<iframe id="frame" src="b.html" style="width:100%;height:100%" frameBorder="0"></iframe>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<body>
<script>
function update_parent(value) {
window.parent.document.getElementById('myinput').value=value;
}
</script>
<a class="tag" name="something" href="javascript:void(0)" onclick="update_parent(something)"/>Bla Bla</a>
</body>
</html>
The purpose here is to update the input box in parent window, when a button is clicked on the iframe. I tried to do it using plain javascript as you can see above, but it doesn't work either. I want to do this using jquery if possible.
function update_parent(value) {
$('#myinput', window.parent.document).val(value);
}
The second parameter for the $() wrapper is the context in which to search. This defaults to document so passing the parent sets the parent as the search context.
Your parent element would be window.self.top
You can access the contents or the document of the parent element.
Having said that, your code should look like:
$(window.self.top.document).find('#myinput');
This will give you the element in your parent.
So i have this problem: I have an input in an iframe with some text in it and another input outside the iframe,in the page body which is empty. What I need is to copy the text in the iframe input to the other input.
How can I do this?
Example code:
<html>
<head>
</head>
<body>
<input id="outside-input" type="text"/>
<iframe>
<input id="inside-input" type="text"/>
</iframe>
</body>
</html>
I don't see how this would be rellevant but the iframe is in fact the Wordpress media upload pop-up.
If iframe is on same domain, you can access its content like this:
$('#outside-input').val($("iFrame").contents().find("#inside-input").val());
AFAIK you cannot access the content of the IFrame from your main page directly using JQuery / other JS.
I have the following iFrame structure , I want to access the html and body tag of top html, so I can sroll view top in click of button inside iframe.
<html>
<body>
<div>
<iframe>
<html>
<body>
content
<input>button</input>
</body>
</html>
</iframe>
</div>
</body>
</html>
Use the top object (which only works at the same domain):
var topDocument = top.document;
//do anything you want
//Example:
topDocument.documentElement; //Returns a reference to the HTML element
topDocument.body; //Returns a reference to the top's body
If you want to access the very first HTML element, use this:
$("html:first")
And if you need to access the other HTML element through the iframe you can use this: $("iframe").children("html")
$("iframe").children("html")
You can use "top" keyword.
Like
top.id.document where id is the 'id' of any element in top html of iframe.
You need to access that from the source of iframe's html.