Does anyone know how to get the HTML out of an IFRAME? I have tried several different ways:
document.getElementById('iframe01').contentDocument.body.innerHTML, document.frames['iframe01'].document.body.innerHTML, document.getElementById('iframe01').contentWindow.document.body.innerHTML, etc
but none of them worked.
I believe the reason they're not working is that the content of my iframe doesn't have a body tag (I'm loading XML). Any other way to get all the contents of the iframe? I am open to jQuery too.
This:
document.getElementById('iframe01').contentWindow.document.body.innerHTML
works fine in the IE, but this:
document.getElementById('iframe01').contentDocument.body.innerHTML
does not work for FF.
Since you tagged this jQuery, I assume you'd appreciate an answer in jQuery to get past the cross-browser issues.
$("#iframe01").contents()
will get you into the jQuery object for the contents of the iframe. You can work from there. Security issues may prevent you from getting the actual HTML content (you'll get an error like "permission denied to get property htmldocument").
Full sample code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
$("#clickme").click(function() {
alert($("#iframe01").contents().find("body").html());
return false;
});
});
</script>
</head>
<body>
<p id="hello">Hello World, there's an iframe below this. Click me!</p>
<iframe id="iframe01" src="iframe_content.html"></iframe>
</body>
</html>
Note that you will have to load the iframe from the same domain and be sure the iframe has loaded before doing anything.
I had a similar issue a while ago. Try using:
document.frames["iframe0"].contentWindow.document.body.innerHTML
That should work for both IE and FF
Related
Is there any tricks to hide the src url in iframe? Or maybe encrypt a part of the external url?
TLDR: No, You cant.
You can prevent it appearing at browser page source using JavaScript. But people still can see it with Inspect Element option.
And if you encrypt the URL, it won't work. HTML src must have a specific URL/File path. It can't understand encrypted text.
Still, If you want to hide it from page source, Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<iframe id="extframe" src=""></iframe>
<script src="script.js"></script>
</body>
</html>
JavaScript at script.js file:
var iframeUrl = document.querySelector('#extframe');
iframeUrl .setAttribute('src', 'https://stackoverflow.com/');
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
hi am trying to create an external link for a java script program i created and i tried using https://www.000webhost.com but they blocked me, so pleases is there any better way i can do this, plus am still a learner in programming,
here is the code i created and i want it to be linked,
document.body.appendChild(document.createElement('script')).src='https://usscript1.000webhostapp.com/example1';
EDIT:
For hosting the JS source file on some external server for testing you can use sites like http://yourjavascript.com
You can search for more alternatives on Google but this one worked well for me :)
Original Answer:
As others pointed out in comments, you can simply put the source url of JavaScript program in src attribute of <script> tag...
<html>
<head>
<script src="https://usscript1.000webhostapp.com/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
Regarding the blocking issue, make sure your src link to the JavaScript file is correct (by opening the link in seperate browser tab or have look at the console in inspect page window for any errors).
You can put the script on the same site and link to it as,
<html>
<head>
<script src="/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
If you are facing issues with putting the file on your site, you can directly put the code of JavaScript program inside <script> tag like this...
<html>
<head>
<script>
...your JS program goes here...
</script>
</head>
<body>...your website's body here...</body>
</html>
I'm making a chrome extension that loads an <iframe> of another site onto the New Tab page. Right now I'm loading YouTube's subscription page (don't worry about the Same-Origin issue, I solved that already), but now I'm trying to cut everything out of the page except the #content element (the subscription feed element).
Here's my code:
Background.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<iframe id="left" src="left.html" name="left"></iframe>
<iframe id="right" src="right.html" name="right"></iframe>
</html>
Left and Right .html
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Load new document" id="loader">
</body>
<script type="text/javascript" src="window.js"></script>
</html>
Window.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("loader").addEventListener("click", loadUrl);
});
function loadUrl()
{
window.location = 'https://www.youtube.com/feed/subscriptions';
[].forEach.call(document.querySelectorAll(!'#content'),function(e){
e.parentNode.removeChild(e);
});
return false;
}
As you can see, right now I'm loading it in with a button. Once it's pressed, it loads YouTube and should cut out all the html except #content, but it's not. Is there another way to solve this, possibly with jQuery? Thanks!
document.querySelectorAll(!'#content')
won't meet your requirements, you should use the following instead if you do want to remove all elements except #content.
document.querySelectorAll('*:not(#content)')
#content isn't accessible to document, because the global document is on a different page - the page containing the iframes, but not their contents. Moreover, document.querySelectorAll(!'#content') is not a valid selector string - that will be interpreted as document.querySelectorAll(false) because ! of a non-empty string returns false.
You're going to have a hard time getting access to the contents of an iframe, just in general. Most browsers, like Chrome, won't event load the contents of an iframe if X-Frame-Options is set to SAMEORIGIN, which, for youtube, it certainly is.
Supposing you're getting around this (with a reverse proxy, perhaps?), you can get the contents of an iframe using JavaScript like so:
iframe.contentWindow.document
You can then use querySelector and friends on the iframe:
iframeDocument.querySelector('#content')
And if you want to cut out a node, you should remove() it:
iframeDocument.querySelector('#content').remove()
Now, having said all of that:
Don't do this.
You're abusing iframes, which requires some very creative (read: brittle, hacky) code, and Youtube certainly has a public API from which you can get access to someone's Youtube feed - and in a way that Youtube is far less likely to block by tightening security, or even by accident. (Suppose the HTML on their page changes, so #content contains everything. Or suppose they decide to check that the correct origin is requesting the page with JavaScript, and block you.)
What you want, you should use Youtube's API for.
I'm currently working on a portfolio website. And I came into a problem while scripting my java code. I tried to troubleshoot for hours on end but to no avail. Then I just decided to make the simplest code to see if it was just me that was being a total idiot. Here is the code:
$(document).ready(function() {
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hi.</h1>
<p>How are you?</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jtest.js"></script>
</body>
</html>
Any help??? Maybe I'm just linking it to the HTML wrong or something. It might just be a simple solution I'm not figuring out.
Check make sure your browser has JavaScript Engine turned on.
Make sure you include all the files name correctly.
Put scripts inside head tab
Sometimes Internet Explorer disables scripts from running it gives you a warning
I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.