Node JS Get all iframes from url - javascript

I have a static webpage which I can't change and I need to get all iframes on this page. The iframes have no id's or name. They look like this
<iframe height="584" width="630" src="someurl" scrolling="auto" noresize="" frameborder="0"></iframe>
So, I can get the "main page" content with the module request but I don't know how to loop through it and find all iframe elements and their sources!
Hope you can help,
dunklesToast

The node module called cheerio is a node-like jQuery alternative. You can load your content of the "main page" and then get all the iframes like this:
var cheerio = require('cheerio')
var $ = cheerio.load(mainPageContent);
$('iframe').each(function(index, element) {
var url = $(element).attr('src'); // --> Get the URL of the iframe
// Do something with the URL of the iframe here
});

Related

Parsing iframe HTML code to get just the src attribute

I want to be able to take Iframe HTML code like the following...
<iframe src="https://example.com" width="100" height="100"></iframe>
and from it just get the src attribute: https://example.com
I will need to get the src attribute in javascript.
I have tried doing the following:
var iframeCode = `<iframe src="https://example.com" width="100" height="100"></iframe>`
document.getElementById("tmpElement").outerHTML = iframeCode
var src = document.getElementById("tmpElement").childNodes[0].src
It works, but there is a security flaw with this approach. If the page I set in the iframe code contains javascript, it would execute. While this is normal behaviour, I need help to find a solution which will either not execute the javascript or get the src without loading the iframe (this may be possible with regex, possibly?, but I am no expert at regex.)
Thank you in advance.
You could use DOMParser, which can turn an HTML string into a document without any possibility of executing unsafe code (like scripts or inline handlers):
const str = '<iframe src="https://example.com" width="100" height="100"></iframe>';
const doc = new DOMParser().parseFromString(str, 'text/html');
console.log(doc.body.children[0].src);

How to load jQuery inside frame?

I am working on a legacy enterprise application whose code was written in 2001 using a combination of JavaScript, HTML, Intersystems Caché, and Caché Weblink.
This is what exists in index.html for the web app:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="32,*" FRAMEBORDER="no" border="0" framespacing="0">
<FRAME
SRC="sysnav.html"
NAME="sysnav"
SCROLLING="no"
MARGINHEIGHT="10"
MARGINWIDTH="10"
NORESIZE>
<FRAME
SRC="cgi-bin/nph-mgwcgi?MGWLPN=dev&wlapp=SYSTEM&SystemAction=DisplayContentFrame"
NAME="content"
SCROLLING="auto"
MARGINHEIGHT="0"
MARGINWIDTH="10">
</FRAMESET>
<noframes>
</noframes>
</HTML>
The problem that I have is that in the content frame, the HTML for that frame is automatically generated every single time, but I need to include jQuery in the frame.
Is there any hack/workaround I can do to shove jQuery into the content frame?
As was alluded to in comments, jQuery could be injected into the frame as long as the frame is on the same domain.
Vanilla Javascript
A script tag like the one below could be added to the <head> element of index.html. It waits until the content frame has been loaded via addEventListener() and then dynamically adds a <script> tag with the src attribute pointing to the jQuery code hosted by the Google Hosted Libraries.
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
frames['content'].addEventListener('load', function() {
var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
contentFrameHead.appendChild(newScriptTag);
});
});
</script>
See it demonstrated in this plunker example. Try clicking the button labeled Test jQuery Loaded in this frame? and see how the result changes when commenting line 10 of index.html.
Utilizing jQuery in index.html
Maybe it would be too much overhead, but if jQuery was added to index.html, jQuery helper functions could be used. I attempted to utilize those to shorten the code but ran into an issue while attempting to create the script tag using $() - refer to this answer for a detailed explanation of why that won't work.
So the code utilizing jQuery helper functions isn't much shorter...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript">
$(function() { //DOM-ready
$(frames['content']).on('load', function() { //load for content frame
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
contentFrameHead.appendChild(newScriptTag);
});
});
If content frame has a different domain
Otherwise, if the domain of the content frame is a different domain than that of index.html, then a server-side script (e.g. using PHP with cURL, nodeJS, etc.) might be necessary to fetch the content of that page and include the jQuery library (which itself might be cumbersome).
No, but you can create a new page and include that in the src. Yes it is ugly, but it could work in some cases.
include jquery in the new page, and include the old page in the new page.

iFrame URL parameter to an in Wordpress?

I have a page which has an iframe embed of an external page. I want to find zip code
Here is my iframe:
<iframe src="http://mortgagerates.icanbuy.com/?zip=" width="1020" height="1200">
http://mortgagerates.icanbuy.com/?zip=10458 (Main Site )
But i want i frame and my browser url same below:
http://www.mysite.com/?zip=10458 (I want something like that)
Is this possible in wordpress? how?
Please check it.. I hope work it...
<iframe src="http://mortgagerates.icanbuy.com/?zip" width="1020" height="1200" class="iframe-wrapper">
And add this jQuery. Thats It!
<script type="text/javascript">
$(function() {
var search = window.location.search;
search = search.replace("?","&");
$(".iframe-wrapper").attr("src", $(".iframe-wrapper").attr("src")+search);
});
</script>
This is ajax page. you want to use ajax.
http://mortgagerates.icanbuy.com/ajax/rates-search?callback=jQuery17209362620610679678_1385958692723&source=1&results_count=0&period=PERIOD_FIXED_30YEARS&state=33&property_type=34&occupancy=49&fico=740&points=1.5&currently_working=Yes&property_interested=Yes&show_fha=0&cashout=0&city=10458&valoans=0&militaryaff=1&hadvabefore=0&rate_lock=99&loan=200000&transaction=54&ltv=80&cltv=80&DO_UPDATE_WRITE=0&id=d4ea9f8db0477778&external=0&_=1385958692873
you need to pass your zipcode into city=10458. its return json encoded format. you simply parse this into your design.

how do i load a view(cshtml) into an iframe?

I'm trying to load a view into an iframe in another(parent) view using javascript and razor.
I'v tried setting the iframe's src to this
var url = '#Url.Action("myaction", "MyController")';
and this:
var url = '#Href("~/myform.cshtml")';
without success.
Thanks
Thanks
If you are using razor engine.
<iframe src = '#Url.Action("myaction", "myController")' width = "100%"
height="1000" frameBorder="0"></iframe>
Set the 'src' attribute of the iframe to the action's url.
Example:
<iframe src ='home/index'></iframe>
Make sure you replace the URL within the src attribute to the URL of the action.
An alternative way in Razor:
<iframe src ='#Url.Action("action name")'></iframe>

Open iframe page in parent frame (javascript)

I'm sure someone in the know has a solution to this problem I'm facing? I have a site with Index.html which contains an Iframe. In this iframe, all pages of the site are shown...Home.html..Info.html...Contact.html..etc.
I'd like a javascript function so that when you open Home.html via the google sitemap for example, it shows up in the parent frame in Index.html. The function I currently have in the head section of each child page is:
<script>
if (parent.location.href == self.location.href){
window.location.href = 'index.html'
}
</script>
Although this works, it doesn't remember the child page and opens the Index page with the default iframe page...Home.html as the iframe is coded like this:
<iframe id="iframe" src="home.html" allowTransparency="true" id="iframeID" name="iframeID" width="100" height="100" scrolling="no" frameborder="no">
</iframe>
Has anybody a solution to this problem, as I've searched everywhere? Thanks.
Try to set location.href with a query string, i.e.:
// .getAttribute so we don't get the absolute URL
var src = document.getElementById("iframe").getAttribute("src");
if (parent.location.href === self.location.href)
location.href = "index.html?" + escape(src);
In index.html create a check for query strings and set the iframe source accordingly:
if (location.search)
document.getElementById("iframe").src =
unescape(location.search.substring(1));

Categories

Resources