i want to get the meta description of the parent page from an iframe, what i did uptill now is that i get the url of the parent page, pass that url to jquery and try to get the meta description but it doesn't work, my code is as follows
<script type="text/javascript">
function addToInterest() {
var URL = parent.window.location;
var Title = parent.document.getElementsByTagName("title")[0].innerHTML;
var MetaDescription = "";
var Img_Src = "";
var metaDesc = $.get('http://myURL.com', function (data) {
MetaDescription = $(data).find('meta[name=description]').attr("content");
Img_Src = $(data).find('link[rel=image_src]').attr("href");
});
alert(MetaDescription);
alert(Img_Src);
}
</script>
But in both alerts, it shows nothing.. i have already tried the methods told here
but did not successfull.
any sample code please....
Regards:
Mudassir
$.get is asynchronous. Both your alerts executed just after $.get call, but at this moment HTTP request can be still in progress. You need to move your alerts inside of callback function:
<script type="text/javascript">
function addToInterest() {
var URL = parent.window.location;
var Title = parent.document.getElementsByTagName("title")[0].innerHTML;
var MetaDescription = "";
var Img_Src = "";
var metaDesc = $.get('http://myURL.com', function (data) {
MetaDescription = $(data).find('meta[name=description]').attr("content");
Img_Src = $(data).find('link[rel=image_src]').attr("href");
alert(MetaDescription);
alert(Img_Src);
});
}
</script>
Also note, what your code will hit Same Origin Policy. By default you can't dynamically load resources, placed on other host, than you script.
Related
I'm trying to put together a picker in google sheets.
Once a file has been uploaded to google drive, I want the url to be posted in the current cell in the spreadsheet.
This is my pickerCallback located in an html file:
var message;
function pickerCallback(data) {
var action = data[google.picker.Response.ACTION];
if (action == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
var id = 'https://drive.google.com/open?id=' + doc[google.picker.Document.ID];
google.script.run.accessSpreadsheet();
} message = id;
document.getElementById('result').innerHTML = message;
}
This returns the url in the picker dialog box.
My accessSpreadsheet function looks like this and is located in a google script file:
function accessSpreadsheet() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var currentCell = sheet.getCurrentCell();
currentCell.setValue(message);
return spreadsheet;
}
The function runs but it cannot define message. Is there a way to access the variable defined in the function in the html file from the google scripts function? Or is there another better way to do this?
Solution:
Pass the string id from client side to server.
Snippets:
google.script.run.accessSpreadsheet(id);
function accessSpreadsheet(id) {
currentCell.setValue(id);
Reference:
Client-Server communication
guys, I am trying to use the Auth function in my script tag which is inside a blade file but it seems like I am getting a yellow warning when I checked their source in google. Is it possible to use the Auth function in a script tag or is there an alternative approach for this? Anyone able to help? thanks in advance.
Here my snippets of code in the script tag
<script type="text/javascript">
$('button').click(function(){
//CONST DATA
const prefix = "QATS";
const url = "http://qr5.dev.ificonsultancy.net/api/sendData";
//Extract Data
var lecturer_id = Auth::user()->id; //HERE IS THE ERROR
var faculty_code = $( "#Faculty" ).val();
var programme_code = $( "#Programme" ).val();
var class_code = $("#Class").val();
//Location Coordinates
var gps_school_lng = "101.5597904";
var gps_school_lat = "3.0923526";
//URL Concatenation
var urlContent = prefix.concat("|",url,"|",lecturer_id,"|",faculty_code,"|",programme_code,"|",class_code,"|",gps_school_lat,"|",gps_school_lng);
//Add src to #qrImg
$("img#qrImg").attr('src',"https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl="+urlContent+"&choe=UTF-8");
console.log("pass");
});
</script>
Yes, just use the mustache syntax:
var lecturer_id = '{{ Auth::user()->id; }}'
I have this ajax call here in a script tag at the bottom of my page. Everything works fine! I can set a breakpoint inside the 'updatestatus' action method in my controller. My server gets posted too and the method gets called great! But when I put the javascript inside a js file the ajax call doesn't hit my server. All other code inside runs though, just not the ajax post call to the studentcontroller updatestatus method.
<script>
$(document).ready(function () {
console.log("ready!");
alert("entered student profile page");
});
var statusdropdown = document.getElementById("enumstatus");
statusdropdown.addEventListener("change", function (event) {
var id = "#Model.StudentId";
var url = '#Url.Action("UpdateStatus", "Student")';
var status = $(this).val();
$.post(url, { ID: id, Status: status }, function (data) {
// do something with the returned value e.g. display a message?
// for example - if(data) { // OK } else { // Oops }
});
var e = document.getElementById("enumstatus");
if (e.selectedIndex == 0) {
document.getElementById("statusbubble").style.backgroundColor = "#3fb34f";
} else {
document.getElementById("statusbubble").style.backgroundColor = "#b23f42";
}
}, false);
</script>
Now I put this at the bottom of my page now.
#section Scripts {
#Scripts.Render("~/bundles/studentprofile")
}
and inside my bundle.config file it looks like this
bundles.Add(new ScriptBundle("~/bundles/studentprofile").Include(
"~/Scripts/submitstatus.js"));
and submitstatus.js looks like this. I know it enters and runs this code because it I see the alert message and the background color changes. So the code is running. Its just not posting back to my server.
$(document).ready(function () {
console.log("ready!");
alert("submit status entered");
var statusdropdown = document.getElementById('enumstatus');
statusdropdown.addEventListener("change", function (event) {
var id = "#Model.StudentId";
var url = '#Url.Action("UpdateStatus", "Student")';
var status = $(this).val();
$.post(url, { ID: id, Status: status }, function (data) {
// do something with the returned value e.g. display a message?
// for example - if(data) { // OK } else { // Oops }
});
var e = document.getElementById('enumstatus');
if (e.selectedIndex == 0) {
document.getElementById("statusbubble").style.backgroundColor = "#3fb34f";
} else {
document.getElementById("statusbubble").style.backgroundColor = "#b23f42";
}
}, false);
});
In the console window I'm getting this error message.
POST https://localhost:44301/Student/#Url.Action(%22UpdateStatus%22,%20%22Student%22) 404 (Not Found)
Razor code is not parsed in external files so using var id = "#Model.StudentId"; in the main view will result in (say) var id = 236;, in the external script file it will result in var id = '#Model.StudentId'; (the value is not parsed)
You can either declare the variables in the main view
var id = "#Model.StudentId";
var url = '#Url.Action("UpdateStatus", "Student")';
and the external file will be able to access the values (remove the above 2 lines fro the external script file), or add them as data- attributes of the element, for example (I'm assuming enumstatus is a dropdownlist?)
#Html.DropDownListFor(m => m.enumStatus, yourSelectList, "Please select", new { data_id = Model.StudentId, data_url = Url.Action("UpdateStatus", "Student") })
which will render something like
<select id="enumStatus" name="enumStatus" data-id="236" data-url="/Student/UpdateStatus">
Then in the external file script you can access the values
var statusbubble = $('#statusbubble'); // cache this element
$('#enumStatus').change(function() {
var id = $(this).data('id');
var url = $(this).data('url');
var status = $(this).val();
$.post(url, { ID: id, Status: status }, function (data) {
....
});
// suggest you add/remove class names instead, but if you want inline styles then
if (status == someValue) { // the value of the first option?
statusbubble.css('backgroundColor', '#3fb34f');
} else {
statusbubble.css('backgroundColor', '#b23f42');
};
});
I need to load a url in an iframe on page load (which is working), then grab the whole url of that loaded iframe, then once the url is saved as a variable i want to find any text between "target" and "/" (example url http://www.example.com/user/target09576/index.php i wish to find the 09576) then redirect the whole page using the found text (09576) as part of the redirect url.
I know, bad explanation and not a great solution, but any help would be appreciated.
$(document).ready(function() {
var iframe = $('#wmif');
var url = '<? echo "".$redirectlocation.""; ?>';
iframe.attr('src', url);
var searchurl = iframe.contentWindow.location;
var rep = /(.*target\s+)(.*)(\s+\/.*)/;
var target = searchurl.replace(rep, '$2');
window.location = 'http://example.com/go/index.php?target='+target;
});
well the iframe loads the new location ok, but it doesn't do any of the rest.
I would do it similar to the below, same result but with jQuery and an updated regex
$(document).ready(function () {
var iframe = $('#wmif');
var url = ''<? echo "".$redirectlocation.""; ?>';
iframe.attr('src', url);
//var searchurl = iframe.contentWindow.location; <- Invalid
console.log($('#wmif').contents().get(0).location);
var searchurl = $('#wmif').contents().get(0).location.href;
console.log(searchurl);
var rep = /.*\/target(\w+)\/.*/;
var target = searchurl.replace(rep, '$1');
console.log(target);
window.location = 'http://domain.com/go/index.php?target=' + target;
});
Yet another solution
var matches = /target\s?([^\/]+)/.exec('http://www.domain.com/user/target09576/index.php')
or
var matches = /(?:target\s?)([^\/]+)/.exec('http://www.domain.com/user/target09576/index.php')
console.log(matches[1]); // 09576
Modify regex to this /(?:target)([^\/]+)/ if you don't expect a space between target and the number.
I'm working on a script that gets all the <table> elements from an external website by going through Yahoo's YQL. This has worked fine recently, but it stopped working as of today. I'm not entirely sure why, all websites used to work with this code:
<script type="text/javascript">
$(document).ready(function () {
var container = $('#target');
function doAjax(url) {
if (url.match('^http')) {
$.getJSON("http://query.yahooapis.com/v1/public/yql?"
+ "q=select%20*%20from%20html%20where%20url%3D%22"
+ encodeURIComponent(url)
+ "%22&format=xml'&callback=?",
function (data) {
if (data.results[0]) {
var fullResponse = $(filterData(data.results[0])),
justTable = fullResponse.find("body");
container.append(justTable);
} else {
var errormsg = '<p>Error: could not load the page.</p>';
container.html(errormsg);
}
});
} else {
$('#target').load(url);
}
}
function filterData(data) {
data = data.replace(/<?\/body[^>]*>/g, '');
data = data.replace(/[\r|\n]+/g, '');
data = data.replace(/<--[\S\s]*?-->/g, '');
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, '');
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g, '');
data = data.replace(/<script.*\/>/, '');
data = data.replace(/<img[^>]*>/g, '');
return data;
}
doAjax('http://www.google.com');
});
</script>
I changed the url to google and changed it to find the <body> tag instead of <table> tags to better show its not working. I looked at the URL that it's requesting and it's not showing any content. Not sure what the problem is though.
Have you checked if the "external website" you have crawled has structural changes?
When it has worked before and now not anymore, then my tip is that the site structure has changed.
It looks like the problem was that YQL was down? I just tested it again and it worked out fine. I wish they would tell us in the future if an outage occurred.