如何给html页面添加动态等待效果

Posted 2023-04-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何给html页面添加动态等待效果相关的知识，希望对你有一定的参考价值。

网友看看是否符合需求，修改起来也很方便，都做了注释；
实在不会的，去查看手册即可
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<head>
<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function()
$('.btn').click(function()
layer.msg('加载中（点击关闭）',
anim: 4, //动画效果
icon: 16,
shade: 0.5, //遮罩层透明度
shadeClose: true, //点击遮罩层关闭
time: 0, //不自动关闭
, function()
layer.alert('显示加载信息后，你可以执行别的操作，就像这样',
skin: 'layui-layer-lan',
closeBtn: 0,
anim: 6 //动画类型
);
);
)
)
</script>
<style type="text/css">
html,
body
margin: 0;
padding: 0;

.demo
</style>
<body>
<div class="demo">
<button class="btn">点击显示效果</button>
</div>
</body>
</html> 参考技术A CSS3和HTML5可以很炫酷参考技术B 用js和css
可带canvas 参考技术C javascript！

如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？

【中文标题】如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？【英文标题】：How do I add structured data using JSON-LD on dynamic pages that need to wait for content to load? 【发布时间】：2015-10-24 05:10:50 【问题描述】：

我正在开发一个网站，我想将结构化数据添加到详细页面。问题是我需要在知道要添加到 JSON-LD 脚本的内容之前请求数据。

我使用 Parse 作为后端。我还尝试四处寻找有关如何实现这一目标的教程，但似乎无法动态添加 JSON-LD。

我真的希望有人可以帮助我！ :)

编辑：

我需要放入 JSON-LD 中的数据的响应是在 DOM 准备好之后出现的。这种情况下的模式是什么？

我有一个项目列表，当单击其中一个时，我必须打开一个必须先加载的详细信息页面，但在加载内容后，我想通过 JSON-LD 提供结构化数据。

我才刚开始，我很难解决这个问题。

编辑 2：

这是我的实际实现：

在 HTML 中：

<body>
    // my html page code
    ...
    <script type="text/javascript">
        loadDetailPageContent();
    </script>
</body>

在 JS 中：

function loadDetailPageContent() 
    // Calling the method here is too early because I don't have info
    //writeData();
    createDetailPage();


function createDetailPage() 
    var recipe = Parse.Object.extend("Recipe");
    var query = new Parse.Query(recipe);
    query.equalTo("objectId", myId);
    query.first(
        success: function(result) 
            // Calling the method here would be perfect
            writeData();
        ,
        error: function(error) 
            alert("Error: " + error.code + " " + error.message);
        
    );


function writeData() 
    var script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify(
        "@context": "http://schema.org",
        "@type": "Recipe",
        "name": "My recipe name"
    );
    document.querySelector('head').appendChild(el);

如您所见，writeData() 方法在两个地方被调用。如果我一开始就立即调用它，没有问题，并且使用谷歌结构化数据测试工具，我能够跟踪我需要的结构化数据。问题在于，那时我没有创建结构化数据的信息，因为我需要等待 Parse 的响应。

当我在成功回调中调用方法时，测试工具无法再检索数据:(

【问题讨论】：

您可以创建一个动态创建 JSON-LD 的脚本，google 的结构化数据解析器 - ***.com/questions/27169085/javascript-inside-ld-json 嘿 Mousey，谢谢，我找到了您链接的答案，问题是在创建 JSON-LD 之前我需要等待请求的响应。如果我将aswer中的代码添加到js文件中，结构化数据不存在您只需要使用window.onload 或$(document).ready() 等待DOM 准备好，将创建JSON-LD 的部分放入***.com/questions/799981/… 中哦！谢谢 Mousey，我会尝试并给你反馈！ @AlexBalo 你得到完美答案了吗？如果您使用 ajax 响应创建的 json-ld 来解决这个问题，我需要一些帮助。我在谷歌上看不到更新的结果。不是谷歌结构化工具中的事件。 【参考方案1】：

http://jsfiddle.net/c725wcn9/2/embedded

您将需要检查 DOM 以检查其是否有效。需要jquery。

$(document).ready(function()
   var el = document.createElement('script');
   el.type = 'application/ld+json';
   el.text = JSON.stringify( "@context": "http://schema.org",  "@type": "Recipe", "name": "My recipe name" );

   document.querySelector('head').appendChild(el);
);

您的代码包含变量名称script，但将变量el 附加到<head>。还删除了使用 JSON-LD playground 检查的 JSON 字符串中的换行符。

【讨论】：

哦，好的，伟大的 Mousey，我今晚在家时会检查这个答案。对于 el 变量，我可能只是错误地复制和粘贴了。我会尽快给您反馈。您好 Mousey，我尝试使用您的代码，但不幸的是，用于测试结构化数据的 Google 工具无法找到我注入的 json。 developers.google.com/structured-data/testing-tool。我认为问题是由于我需要在注入之前等待我的 Parse 请求的响应，并且此时页面已经被扫描以查找结构化数据。我真的很难理解它是如何工作的。 @AlexBalo - 这就是为什么您需要检查 DOM 以获取动态创建的 JSON-LD 代码，然后您可以将其复制到谷歌测试器中，或者使用代码创建一个测试页面并抓取它然后看看它是否出现（我花了 2 天）。 Google 的工具不检查动态代码，结构化数据 linter 工具也不检查。啊，好吧，你的意思是用谷歌工具它不会被检索，但如果我在 DOM 中看到它，这意味着搜索引擎将能够理解它，对吧？我可以检查一下。例如在我的搜索控制台中的 2 天，对吗？感谢 Mousey 的帮助！【参考方案2】：

我认为 Mousey 完美地回答了这个问题，我将分享类似的我们在页面上加载航班详细信息但对于价格我们调用 API 的场景当页面加载时，我们必须在获取价格时动态加载架构。

我们创建了一个嵌套函数，我们在页面加载和传递飞行时调用它详细信息然后在我们调用“priceGraber”API 时页面加载（获取航班 price), 一旦 priceGraber 返回成功响应，我们就注入 schema 在页面上。

架构创建功能：

    // create product schema
createProductSchema = function(from, to, currency) 
    return injectSchema = function(price) 
        let el = document.createElement('script');
        el.type = 'application/ld+json';
        el.text = JSON.stringify(
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": `Flight from $from to $to`,
            "description": `Cheap flights from $from to $to`,
            "offers": 
                "@type": "Offer",
                "url": `http://flightsearches.net?fso=$from&fsd=$to`,
                "priceCurrency": `$currency`,
                "availability": "https://schema.org/InStock",
                "price": `$price`,
            
        );

        console.log('inject now ');
        document.querySelector('head').appendChild(el);
    ;
;

页面加载时可用的架构的页面加载传递信息

下面的脚本在刀片文件中， $flight_from , $flight_to 是刀片指令（服务器端变量）

        <script>
    $(function()
                if(typeof createProductSchema == "function") 
                    console.log('create product schema...');
                    window.injectProductSchema = createProductSchema( $flight_from ,   $flight_to );
                 else 
                    console.error("product schema creator doesn't exists !");
                
            );

         </script>

动态注入架构

我们在 ajax 响应中调用下面的函数，在那里我们得到“价格”表单 API，然后这个函数调用嵌套函数，然后将模式附加到头部

window.injectProductSchema(price);

【讨论】：

以上是关于如何给html页面添加动态等待效果的主要内容，如果未能解决你的问题，请参考以下文章

jquery动态添加到html页面的元素绑定事件

Web基础

Qt中QTabWidget动态添加页面的问题

给HTML页面添加CSS样式和自适应布局控制其显示

如何利用AngularJS动态创建表格和动态赋值

JS如何实现页面的动态效果和交互效果？（用语言描述）