Add contents to an empty frame - javascript

I have an empty frame in my page, with src set to '' (empty).
I also have a string like this:
<html>
<head>
<base src="http://www.example.com">
<title>Blah</title>
</head>
<body>
<p>Fancy web page</p>
</body>
</html>
I would like to populate the iframe with the string, so that the exact content of it matches the string.
What's the best way to do this? I am going insane trying to do it.

You need to set an id on the iframe and then set the innerHTML of the iframe's document body and head to the head/body string values.
Here's a working fiddle: http://jsfiddle.net/theoutlander/dw3r7/1/
<iframe id=testframe></iframe>
var strHead = '<base src="http://www.example.com"><title>Blah</title>'
var strBody = '<p>Fancy web page</p>';
testframe.document.head.innerHTML = strHead;
testframe.document.body.innerHTML = strBody;

Related

Calling iframe link from other js file not working

I created an iframe in vex6.html and a js file in styles.gq/test.js and in that file there is the link and id but when I try to call the code in html it does not work.
Here is my code for vex6.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript" src="https://styles.gq/test.js" ></script>
<iframe id="vex6" width="100%" height="500" style="border:1px solid black;"></iframe>
</body>
</html>
here is my js code
document.getElementById("vex3").src
= "https://www.obviousplays.tk/gfiles/vex3";
document.getElementById("vex4").src
= "https://www.obviousplays.tk/gfiles/vex4";
document.getElementById("vex5").src
= "https://www.obviousplays.tk/gfiles/vex5";
document.getElementById("vex6").src
= "https://www.obviousplays.tk/Gfiles6/vex6";
document.getElementById("slope").src
= "https://www.obviousplays.tk/gfiles/slope";
I expected an iframe but instead there seems to be no link for the iframe
it is also spitting out the error cannot set properties of null (setting(src))
Add the line
<script type="text/javascript" src="https://styles.gq/test.js</script> after the iframe tag.
Worked for me.
Error in console: "script.js:3 Uncaught TypeError: Cannot set properties of null (setting 'src')"
Your script is loaded before the iframe content, meaning that you're trying to initialize the source of an unidentified object.
Solution: Place the <script> tag below your iframe. It is a good practice to place <script> tags at the bottom of the <body> tag so we can always access loaded content. However, sometimes it takes the contents a little bit more time until they fully load (despite placing the <script> tag at the bottom of the page). I'd suggest wrapping your code in window.onload = () {} It will ensure that all contents are loaded before firing the code.
<body>
<iframe id="vex3" width="100%" height="500" style="border:1px solid black;"></iframe>
<script type="text/javascript" src="https://styles.gq/test.js"></script>
</body>
Your code is fine and should work (pardon for criticizing). Anytime you seem to use repetitive code, it means that it can be simplified/automated like so:
window.onload = () => {
// Target all <iframe> tags.
iframes = document.querySelectorAll('iframe');
// Loop through list of <iframe> nodes.
Array.from(iframes).map(iframe => {
// Update <iframe>'s attribute "src" to the origin URL,
// and use the iframe's attribute "id" value as the final source.
iframe.setAttribute('src', `https://www.obviousplays.tk/gfiles/${iframe.id}`)
});
}

How can I access the content of a dynamically created object tag in jquery?

I've been searching for an answer for this problem for several hours and I can't seem to find any solutions that work. I have created a dynamic object tag using jquery and set its data to another page on my website. I appended the object tag to a div and the div to the body of my page. What I want to do is access the html of the page that I set as the data of my object tag in order to monitor for changes on that page and update my current page based on those changes. When defining the object tag in html, I can access its contents using the contentDocument property of the object tag but when generating the tag dynamically, contentDocument is undefined. I've also tried using the contents function of jquery but it returns an object of length 0. Here is basically what I've tried:
This is the code for my page test.php:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function test()
{
var parentDiv = document.createElement("div");
$(parentDiv).addClass("parentDiv");
var object = $("<object>");
$(object).attr("id","objectId");
$(parentDiv).append(object);
$("body").append(parentDiv);
$(object).attr("data","test2.html");
$(object).addClass("object");
// These give errors
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());
/* THIS WORKS IF object defined as a tag in HTML body
var content = document.getElementById("objectId").contentDocument;
alert(content.getElementById("div").innerHTML);
*/
}
</script>
</head>
<body onload="test()">
<!-- <object id="objectId" data="test2.html"></object> -->
</body>
</html>
And this is the code for the page of the object data test.html:
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
</head>
<body>
<div id="div" style="width:200px;height:200px;background-color:red">
DIV Contents
</div>
</body>
</html>
Any help is greatly appreciated. Thank you.
At this moment, it is a jQuery object. So you need to define it:
// Replace it like this:
var content = document.getElementById("objectId").contentDocument;
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());
Or you can also use like:
// Replace it like this:
var content = $("#objectId").get(0).contentDocument;
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());
I think you have a number of HTML/Javascript concepts mixed up. I've corrected your code to at least have no errors:
var parentDiv = document.createElement("div");
$(parentDiv).addClass("parentDiv");
var object = document.createElement("object");
object.setAttribute("id", "objectId");
object.innerHTML = "Hello, Earth!";
$(parentDiv).append(object);
$("body").append(parentDiv);
object.setAttribute("data", "test2.html");
$(object).addClass("object");
var content = document.getElementById("objectId");
alert(content.innerHTML);
The jQuery '$' function, the same as the 'jQuery' function, which is an element selector, not an element creator. This code, var object = $("<object>") won't work because there does not exist an object on the page which is targeted by CSS selector <object>. I've changed that bit to document.createElement("object") instead.
As the object variable is now a DOM element, I've elected to use the .setAttribute function instead, which is a native DOM function.
$("body").append(parentDiv) will correctly add the parentDiv (and its child object) DOM element to the end of the body element. This allows $(object).addClass("object") to function properly.
The contentDocument property is exclusive to the iFrame element. I've changed the property to innerHTML instead. The alert box correctly displays "Hello, Earth!" which is the contents of the object element.
Working JSFiddle demo here.

Nested iframes, AKA Iframe Inception

Using jQuery I am trying to access div id="element".
<body>
<iframe id="uploads">
<iframe>
<div id="element">...</div>
</iframe>
</iframe>
</body>
All iframes are on the same domain with no www / non-www issues.
I have successfully selected elements within the first iframe but not the second nested iframe.
I have tried a few things, this is the most recent (and a pretty desperate attempt).
var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');
// iframeContent is null
Edit:
To rule out a timing issue I used a click event and waited a while.
jQuery().click(function(){
var iframe = jQuery('#upload').contents().find('iframe');
console.log(iframe.find('#element')); // [] null
});
Any ideas?
Thanks.
Update:
I can select the second iframe like so...
var iframe = jQuery('#upload').contents().find('iframe');
The problem now seems to be that the src is empty as the iframe is generated with javascript.
So the iframe is selected but the content length is 0.
Thing is, the code you provided won't work because the <iframe> element has to have a "src" property, like:
<iframe id="uploads" src="http://domain/page.html"></iframe>
It's ok to use .contents() to get the content:
$('#uploads).contents() will give you access to the second iframe, but if that iframe is "INSIDE" the http://domain/page.html document the #uploads iframe loaded.
To test I'm right about this, I created 3 html files named main.html, iframe.html and noframe.html and then selected the div#element just fine with:
$('#uploads').contents().find('iframe').contents().find('#element');
There WILL be a delay in which the element will not be available since you need to wait for the iframe to load the resource. Also, all iframes have to be on the same domain.
Hope this helps ...
Here goes the html for the 3 files I used (replace the "src" attributes with your domain and url):
main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main.html example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first
setTimeout( function () {
console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it
}, 2000 );
});
</script>
</head>
<body>
<iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe>
</body>
iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>iframe.html example</title>
</head>
<body>
<iframe src="http://192.168.1.70/test/noframe.html"></iframe>
</body>
noframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>noframe.html example</title>
</head>
<body>
<div id="element">some content</div>
</body>
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');
iframeInner contains elements from
<div id="element">other markup goes here</div>
and iframeContent will find for elements which are inside of
<div id="element">other markup goes here</div>
(find doesn't search on current element) that's why it is returning null.
Hey I got something that seems to be doing what you want a do. It involves some dirty copying but works. You can find the working code here
So here is the main html file :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Iframe = $('#frame1');
Iframe.on('load', function(){
IframeInner = Iframe.contents().find('iframe');
IframeInnerClone = IframeInner.clone();
IframeInnerClone.insertAfter($('#insertIframeAfter')).css({display:'none'});
IframeInnerClone.on('load', function(){
IframeContents = IframeInner.contents();
YourNestedEl = IframeContents.find('div');
$('<div>Yeepi! I can even insert stuff!</div>').insertAfter(YourNestedEl)
});
});
});
</script>
</head>
<body>
<div id="insertIframeAfter">Hello!!!!</div>
<iframe id="frame1" src="Test_Iframe.html">
</iframe>
</body>
</html>
As you can see, once the first Iframe is loaded, I get the second one and clone it. I then reinsert it in the dom, so I can get access to the onload event. Once this one is loaded, I retrieve the content from non-cloned one (must have loaded as well, since they use the same src). You can then do wathever you want with the content.
Here is the Test_Iframe.html file :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Test_Iframe</div>
<iframe src="Test_Iframe2.html">
</iframe>
</body>
</html>
and the Test_Iframe2.html file :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>I am the second nested iframe</div>
</body>
</html>
You probably have a timing issue. Your document.ready commend is probably firing before the the second iFrame is loaded. You dont have enough info to help much further- but let us know if that seems like the possible issue.
You should use live method for elements which are rendered later, like colorbox, hidden fields or iframe
$(".inverter-value").live("change",function() {
elem = this
$.ajax({
url: '/main/invertor_attribute/',
type: 'POST',
aysnc: false,
data: {id: $(this).val() },
success: function(data){
// code
},
dataType: 'html'
});
});
I think the best way to reach your div:
var your_element=$('iframe#uploads').children('iframe').children('div#element');
It should work well.
If browser supports iframe, then DOM inside iframe come from src attribute of respective tag. Contents that are inside iframe tag are used as a fall back mechanism where browser does not supports iframe tag.
Ref: http://www.w3schools.com/tags/tag_iframe.asp
I guess your problem is that jQuery is not loaded in your iframes.
The safest approach is to rely on pure DOM-based methods to parse your content.
Or else, start with jQuery, and then once inside your iframes, test once if typeof window.jQuery == 'undefined', if it's true, jQuery is not enabled inside it and fallback on DOM-based method.

Change the whole content of iFrame

I have a textarea in which I wan't to add HTML code that will compose a full webpage, and as I type this content will be rendered in an iframe
For example in the textarea I'll write the following code:
<!DOCTYPE html>
<html>
<head>
<title>Live generate</title>
<style></style>
</head>
<body>
</body>
</html>
My problem is that I don't know how to access the iFrame in order to change it's full content so that it matches the one above
you should be able to get the iframe by its id with document.getElementsById or through jquery and then get its document, open it and write to it.
Like:
var iframe = $("iframe"); // or by Id $("#myIframeId")
var doc = iframe.document;
doc.open();
doc.write($("#myTextArea").text());
doc.close();

how to get script inside content see example below

I want to get content of script tag example
now see above in src property load bolo7.com content i want to catch that contain
i have try so many method but it doesn't work
try 1 -> document.getElementById("data").innerHTML; //doesn't work
try2 -> document.getElementById("data").text; //doesn't work
if you are intelligent in javascript please give me answer that how to get content of script inside content
thanks in advance for your answer
my website is : http://www.bolo7.com/
The text property defined by the HTMLScriptElement interface is the text content of the script element. If the element uses a src attribute, it should not have any content so its text property will be an empty string.
In that case, you will need to access the src some other way, perhaps XMLHttpRequest will suit.
Note also that the id attribute for script elements is not valid for the DOCTYPE being used at the linked resource (and the document is invalid).
Something like this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//some data here
function add1(x) {
return 1 + x;
}
</script>
<script type="text/javascript">
alert(document.getElementsByTagName("script")[0].innerHTML);
</script>
</head>
<body>
</body>
</html>
but RobG is right, only works for inline javascript.

Categories

Resources