Hi,
I am trying to load HTML code and display it on my site based on the URL parameters.
I want it to work like this. My shortcut (Siri Shortcuts) will redirect people to https://example.com/index.html?page=[HTML CODE HERE]. Then the HTML code that is in that URL variable, will display on the site (not the blank text but overwrite the existing code so it will display that HTML page). The problem is I am doing it with this code below.
window.onload = function() {
try {
var url_string = (window.location.href).toLowerCase();
var url = new URL(url_string);
var page = url.searchParams.get("page");
document.write(page);
}
}
It works fine when I want it to output 'test' (https://example.com/index.html?page=test). But when I put the whole HTML code in the url variable, it won't output anything.
NOTE: I am still new to HTML and JS.
document.write wipes the page, script and all. that is Why is document.write considered a "bad practice"?
If you must pass data between pages, pass the data only and update existing code on the new page. So for example have
<p id="test"></p>
on the page and ?pageContent=somecontent in the URL
Then you can do
var pageContent = url.searchParams.get("pageContent");
document.getElementById("test").textContent=pageContent;
instead of ?page=<p id="test">somecontent</p>
Alternative is to call the server for more content using AJAX, and update the page dynamically with that content.
Related
I have multilingual single page html application where I set html of tags by calling function on document.ready. However I am not getting html of any tag in page source when I view page on View Page Source. How can I get the tags in page source? document.ready is in the last script tag of the page.
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
Below function is in js file. This file is added above the last script tag (i.e. document.ready script).
function translateFunction(lang) {
$("[tkey]").each(function (index)
{
var strTr = lang_resource[lang][$(this).attr('tkey')];
$(this).html(strTr);
});
}
<h1 tkey="firstH1"></h1>
Language wise data is in json format in the same js file with translate function.
When I view the page source, I see only
<h1 tkey="firstH1"></h1>
Where it needs to be like below,
<h1 tkey="firstH1">Anything from the translate function.</h1>
On the page, you can see the desired output, but in the page source, I am not getting html set. What I want to do is, I want set html of the tags in javascript on document.ready. How to do it?
EDIT
We want to add meta tags. And set keywords and description language wise. This is the main concern. The keywords and description are set in translate function. Will the crawler take the keywords and description?
We have two links language wise in site map. So when user select say french language, it will redirect to www.mysite.com?lang=fr and all the tags are set in french language. So the meta keywords and description.
Firstly if this is the exact code,
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
there is error in itself...
there should be some value for var lang
I'm making a Chrome Extension that changes the DOM of a page. But I would like to give the user an option to switch between the page before the changes and the changed page.
It's a little bit like Google translate where you can change between the orginal language and the translated message.
I could not find anything in my own searches.
I know JavaScript but not JQuery yet.
Thanks for the help.
You could save the entire body in a variable, then start overwriting things. If you want to switch back load up the old body.
You could save all the original DOM content to a variable before running the content script. You can do this by using the following code at the top of your content script:
var originalDOM = document.getElementsByTagName("*");
This saves the entire DOM in an array called originalDOM. The * acts a universal tag, requesting every tag in the document. You can read more about the .getElementsByTagName() API here.
You could try:
var html = document.getElementsByTagName("html")[0];
var page = html.innerHTML;
This will give you everything between the <html> tags.
After the content script is injected, run:
var newPage = html.innerHTML;
Now, whenever you want to switch between the pages, simply run:
html.innerHTML = page; //or newPage
You can read more about the .getElementsByTagName() API here
I am currently using Jquery's .load() function to insert a page fragment asynchronously. In the URL that I am loading the page fragment from, I also set a Javascript global variable value (in the script tag).
var loaded_variable = 'value1'
Is there a way I can use the .load() function to insert the page fragment AND retrieve the value of loaded_variable, something like the following code:
function loadProducts(url) {
$('#mainplace').load(url + ' #submain', function() {
current_variable = loaded_variable;
});
}
I am aware that script blocks are used when a selector expression is appended to the URL, so if the .load() function won't work, I'm open to other Jquery functions that can accomplish this.
Extra Info: The URL that I am loading from is written in HTML and Python (Web2py); the same Python variables are used to render the page fragment and set the loaded_variable value.
If you want to both fetch a fragment from a page and execute a script on it, you'll need a different approach. This is a bit hacky, but works.
$.ajax({url: 'fetch_page.html', dataType: 'text'}).done(function(html) {
var dom = $('<html />').prop('innerHTML', html);
$('body').append(dom.find('body p'));
$('head').append(dom.find('script'));
});
That fetches a p tag from our fetched pages and inserts it into the body of the parent page. It also executes any scripts in the fetched page.
If you're wondering about the prop('innerHTML... bit, that's because if I'd used jQuery's .html() method, it sanitises the input string and so we don't get the result we want.
My first thought was a document fragment, but you can't insert an HTML string into a doc frag - you have to append via DOM methods. Even then in this case it wouldn't really offer any saving over simply using an element to parse the dom (dom) as I have.
Bit hacky, as I say, but works.
I think I have a similar question. I have create a page that will hold a newsletter sign up. I want to load this page at the bottom of every blog post on my site. I don't want it in the footer because it is specific to my blog page and I want the ability to edit it without having to edit every blog post.
I created this page with the url /blog-newsletter-form which includes some code from an Email CRM.
I then added a div with a "blog-newsletter-form" class at the end of my blog posts and put the following in the page header to load the content from the first page section inside my blog posts.
$( document ).ready(function() {
$('.blog-newsletter-form').load("/blog-newsletter-signup #page .page-section:nth-of-type(1) .content");
});
This worked great except.. the load function is stripping the script from the newsletter page which is required for my newsletter form to work.
How do I load a page fragment but also keep the script for the newsletter. I tried using your sample code above and couldn't get it to work.
I am running this script within a content page on my ASP.net site.
<script>
$(document).ready(function () {
var satShifts = $('#hidSat').val();
alert("Sat: " + satShifts);
});
</script>
On the page_Load event on the server I have this code:
hidSat.Value = "2";
The variable comes back as undefined in the alert window. I have this same process on the master page with another script and it works flawlessly. Is this an issue because it is a content page?
As far as i know,
if u use asp control in the content page,
the id is prefix with master name by .net compiler b4 render to html page.
So, here is my suggestion:
inspect the output html file with FireBug or Chrome
and see the name of ur hidden field.
if it is different, then u need to assign the id to some variable in JS.
like:
var tmp = '<%=hidSat.CliendID %>';
then,
$(tmp).val();
if it doesn't work, try with .html() method.
it will return all html code within ur hidden field.
Hope it works!
Change the code to below, since hidSat is server control.
var satShifts = $('#<%=hidSat.ClientID#').val();
I am trying to embed a 3rd party chart (Twist) into an HTML page. Also on the HTML page, I am using a text input to allow for a user to dynamically enter new parameters to be sent to Twist.
In javascript, I am attempting to append the text input to the end of the call to the external chart. I cannot, however, figure out how to have the returned JavaScript render in my page.
Let me be more specific... the instructions for embedding the chart are to put a tag into the html. So it would be like below, where 'paramValue' is the value passed to the 3rd party.
<script src='http://twist.flaptor.com/embed?size=large&gram=paramValue&span=168&'></script>
This works fine, but it is hard-coded to search for 'paramValue'. The script returns more javascript that gets embedded into my page and renders a chart. I am trying to make this dynamic by replacing 'paramValue' with the text input from a user. However, I cannot figure out how to send that value and also have the results rendered properly.
Looking at that javascript, it uses document.write(). document.write() writes to the document during loading, but if invoked after the page has been loaded doesn't work well.
In short, you can't do it by just changing paramValue and adding a new script tag.
Try to see if Twist has something for dynamic content.
On behalf of Stu42:
<script type="text/javascript" language="javascript">
var paramValue = GetParamValue();
var url = "<div";
url += '>'
url += "<script src='http://twist.flaptor.com/embed?size=large&span=168&gram=";
url += paramValue;
url += "'";
url += '>';
url += "</script>";
url += "</div";
url += '>';
document.write(url) ;
</script>