Open iframe page in parent frame (javascript) - 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));

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 add a PHP page into blogspot.com new page

I have a real .php page like this http://hiteachers.com/soccer_parse.php?id=5. I want to add it into a blogger.com new page (**not a new blog post, or new HTML widget **, and I've got this successfully.
https://tranbongda.blogspot.com/p/function-myfunction-window.html
I used the code like this:
<script>
var Window;
// Function that open the new Window
function windowOpen() {
Window = window.open("http://hiteachers.com/soccer_parse.php?id=5",
"_blank", "width=400, height=450");
}
// function that Closes the open Window
function windowClose() {
Window.close();
}
</script>
<button onclick="windowOpen()">Open page</button>
<button onclick="windowClose()">Close page</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function(){
$("#div1").load("http://hiteachers.com/soccer_parse.php?id=5");
});
});
</script>
My expectation is that I'd like the blogger page to load the original content of the .php page immediately when the visitor visits the blogger.com page (https://tranbongda.blogspot.com/p/function-myfunction-window.html) without clicking on any button.
I have thought of creating iframe by using this:
<iframe name="Framename" src="http://hiteachers.com/soccer_parse.php?id=5" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>
But the blogger.com page does not accept it, and returns the error message like this:
This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.
Then I moved to try this <object width="500" height="300" type="text/html" data="http://hiteachers.com/soccer_parse.php?id=5"></object> as per some bloggers' suggestions, but I still failed.
Some other bloggers suggested to use AJAX, which is very new to me.
So, is there any way to parse the provided .php page content and add it to the blogspot.com/blogger.com new page without showing the url of the .php page or window pop-ups?
Can you help me please?
Thanks
As the bloggers likely have suggested, make the PHP server a REST endpoint and access the data on the blog site with Asynchronous JavaScript and XML. Although today people have tended to scratch the XML part and go with JSON or something.
AJAX is accomplished by using the XMLHttpRequest object.
Mozilla's spec provides links and stuff which will show you how to use it
and w3schools is a good resource.
Then it's all comes down to editing the page directly
element.removeChild(element.lastChild);
element.appendAdjacentHTML('beforeend',xhr.responseText);

Node JS Get all iframes from url

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
});

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>

Categories

Resources